JavaScript如何隐藏鼠标

顺晟科技

2021-06-28 17:25:22

236

今天发现项目中有一个很有意思的小功能，就是鼠标移入某个区域后自动隐藏。虽说这个小需求非常的罕见，但写起来也很简单，下面是一个示例的代码，大家可以参考一下！

javascript 隐藏鼠标的方法

隐藏鼠标的示例源码

<html>
<head>
<title>隐藏鼠标的示例</title>
<style type="text/css">
    div{
        width:200px;
        height: 200px;
        background-color: #f5f5f5;
    }
</style>
</head>
<body>
    <div id="main">
        <p>鼠标移动到这个地方后就会自动隐藏！</p>
        <p>顺晟科技博客</p>
    </div>
    <script>
        var main = document.getElementById('main');
        main.style.cursor = 'none';
    </script>
</body>
</html>

示例演示图片：

js隐藏鼠标的方法,css隐藏鼠标的方法

CSS cursor 属性

上面的示例无非就是给div元素加个一个 css 的 cursor 属性，并把属性的值设置为 none 。如果不使用JS的话，也可以直接使用 css 属性来隐藏鼠标。

CSS隐藏鼠标的示例源码

<html>
<head>
<title>隐藏鼠标的示例</title>
<style type="text/css">
    div{
        width:200px;
        height: 200px;
        background-color: #f5f5f5;
        cursor:none;
    }
</style>
</head>
<body>
    <div id="main">
        <p>鼠标移动到这个地方后就会自动隐藏！</p>
        <p>顺晟科技博客</p>
    </div>
</body>
</html>

上一篇：js将字符串转换成小写的方法下一篇：html页面仿黑客帝国代码非源代码示

网站建设

Js

JavaScript如何隐藏鼠标