Js鼠标悬停事件，简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件

最新推荐文章于 2023-11-03 23:29:06 发布

原创最新推荐文章于 2023-11-03 23:29:06 发布

· 2.6k 阅读

14 ·

版权

文章标签：

#js #javascript #html

java 同时被 3 个专栏收录

38 篇文章

订阅专栏

html

11 篇文章

订阅专栏

6 篇文章

订阅专栏

本文介绍了一种使用纯JS实现的鼠标悬停事件，通过该事件可以实现在导航栏上划过时内容弹窗的效果。示例代码展示了如何为不同的导航项绑定鼠标悬停事件，并在悬停时显示相应的详细信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Js鼠标悬停事件，简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        body {
            background-color: #eeeeee;
        }
        .clearfix {
            clear: both;
        }
        div.title {
            margin-top: 100px;
            margin-left: 300px;
        }
        div.title ul li {
            float: left;
        }

        div.title ul li a {
            display: block;
            height: 30px;
            line-height: 30px;
            background-color: skyblue;
            color: #ffffff;
            padding: 5px 12px;
        }
        div.title ul li a:hover {
            background-color: purple;
        }
        div.content {
            margin-left: 300px;
            background-color: #ffffff;
            width: 342px;
        }
        div.content > div {
            display: none;
        }
        div.content > div:first-child {
            display: none;
        }

    </style>
</head>
<body>
<div class="title">
    <ul>
        <li><a class="title-content" href="#">Java</a></li>
        <li><a class="title-content" href="#">C语言</a></li>
        <li><a class="title-content" href="#">Python</a></li>
        <li><a class="title-content" href="#">PHP</a></li>
        <li><a class="title-content" href="#">Android</a></li>
    </ul>
    <div class="clearfix"></div>
</div>
<div class="content">
    <div class="detail">
        <ul>
            <li><a>Java是一门优秀的语言</a></li>

        </ul>
    </div>
    <div class="detail">
        <ul>
            <li><a>C语言是一门优秀的语言</a></li>

        </ul>
    </div>
    <div class="detail">
        <ul>
            <li><a>Python是一门优秀的语言</a></li>

        </ul>
    </div>
    <div class="detail">
    <ul>
        <li><a>PHP是一门优秀的语言</a></li>

    </ul>
</div>
    <div class="detail">
        <ul>
            <li><a>Android是一门优秀的语言</a></li>

        </ul>
    </div>
</div>
</body>
<script>
    // 根据样式类名，或者dom节点，返回的是数组，因为很多dom节点的class样式一样
    var titles = document.getElementsByClassName('title-content');

    // var arr = [34, 45];

    // 详情信息
    var details = document.getElementsByClassName('detail');

    for(var i = 0; i < titles.length; i++) {
        var title = titles[i];
        // 给每个title人为加个属性, 将每一次遍历的值，赋值给title新添加的属性
        title.n=i;
        // 鼠标悬停事件绑定, 但是没有执行, 真正取i的值的时候，是执行事件的时候
        title.onmouseover = function() {
            var ind = this.n;  // 获取到当前鼠标悬停的title的索引

            for(var j = 0; j < details.length; j++) {
                // 让与title对应的新闻详情显示, 索引相同就对应上了
                if(ind == j) {
                    details[j].style.display = 'block';
                }else { // 将其他的隐藏
                    details[j].style.display = 'none';
                }
            }
        };
        // title.onblur=function () {
        //
        //     var inds = this.n;
        //     for (var o =0;o<details.length;o++){
        //
        //         if (inds==false){
        //             details[o].style.display='none';
        //
        //
        //         }else{
        //             details[o].style.display='block';
        //
        //         }
        //
        //
        //     }


        // }

        //console.log(i)
    }

    function onmouseover(obj) {


    }


</script>
</html>