2021-08-02

最新推荐文章于 2024-09-26 19:38:44 发布

weixin_53938410

最新推荐文章于 2024-09-26 19:38:44 发布

阅读量45

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_53938410/article/details/119326788

版权

js实现鼠标移动上出现移出消失

通过js改变displa属性的值进行实现
onmouseover来进行添加 //鼠标移上时的操作
onmouseout来进行删除 //鼠标移下时的操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav {
            height: 41px;
            border-top: #ff8500 solid 3px;
            border-bottom: #edeef0 solid 1px;
            background-color: #fcfcfc;
            line-height: 41px;
            font-size: 12px;
        }
        a {
            text-decoration: none;
            display: inline-block;
            padding: 0 20px;
            height: 41px;
            color: #4c4c4c;
        }
        a:hover {
            color: #ff8500;
            background-color: #eee;
        }
        .my {
            height: 80px;
            width: 140px;
            background-color: #ff8500;
            display: none;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" onmouseover="add()" onmouseout="delet()">新浪</a>
        <a href="#">新浪号</a>
        <a href="#">新浪很好</a>
        <a href="#">新浪非常好</a>
    </div>
    <div class="my" id="my">
        
    </div>
</body>
    <script>
        function add(){
        var a = document.getElementById("my")
        console.log(a)
        a.style.display = "block"
        }
        function delet(){
        var a = document.getElementById("my")
        console.log(a)
        a.style.display = "none"
        }

    </script>
</html>