热搜：编程 Python Microsoft 编程语言 C++

javascript隐藏鼠标的方法

发布时间：2022-12-31 16:51:33 来源：网络

.

我们从自然手上收到的最大礼物就是生命。我必须拼命的奔跑我知道有很多人等着看我狼狈跌倒的下场嘲笑我不自量力

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

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>

以上就是javascript隐藏鼠标的方法。览前贤思己任铁杵磨针只求前程似锦，念亲情感师恩悬梁刺股但愿无愧我心。更多关于javascript隐藏鼠标的方法请关注haodaima.com其它相关文章！

以下您可能有感兴趣的文章: