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

最新推荐文章于 2023-06-30 17:01:07 发布

嘘 -你听

最新推荐文章于 2023-06-30 17:01:07 发布

阅读量2.4k

点赞数 2

分类专栏： html js java 文章标签： js javascript html

本文链接：https://blog.csdn.net/weixin_44657829/article/details/105716056

版权

java 同时被 3 个专栏收录

38 篇文章 0 订阅

订阅专栏

html

11 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

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>

jquery实现：https://blog.csdn.net/weixin_44657829/article/details/106043946

html实现：https://blog.csdn.net/weixin_44657829/article/details/105326856

嘘 -你听

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
Js鼠标悬停事件，简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件

Js鼠标悬停事件，简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * ...
复制链接

扫一扫