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

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>