jQuery实现鼠标悬停功能，就像平时看各平台新闻时，鼠标划过标题栏出现的效果

最新推荐文章于 2022-02-23 16:45:44 发布

嘘 -你听

最新推荐文章于 2022-02-23 16:45:44 发布

阅读量706

点赞数

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

版权

java 同时被 3 个专栏收录

38 篇文章 0 订阅

订阅专栏

html

11 篇文章 0 订阅

订阅专栏

jquery

6 篇文章 0 订阅

订阅专栏

jQuery实现鼠标悬停功能，就像平时看各平台新闻时，鼠标划过标题栏出现的效果

js实现：https://blog.csdn.net/weixin_44657829/article/details/105716056

HTML实现（导航栏）：https://blog.csdn.net/weixin_44657829/article/details/105326856

效果图如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.0.js"></script>
    <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: 240px;
        }
        div.content > div {
            display: none;
        }
        div.content > div:first-child {
            display: block;
        }

    </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 id="content" 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>

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

    </div>
</div>
</body>
<script>
    $('.title a').each(function(index) {
        // 绑定mouseover(鼠标悬停)事件
        $(this).mouseover(function() {
            // hide() 是影藏的意思
            $('#content > div').hide();  // style.display = 'none';
            // show() 让其展示
            $('#content > div:eq(' + index +')').show();  // style.display = 'block';
        })
    })
</script>
</html>

嘘 -你听

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现鼠标悬停功能，就像平时看各平台新闻时，鼠标划过标题栏出现的效果

jQuery实现鼠标悬停功能，就像平时看各平台新闻时，鼠标划过标题栏出现的效果js实现：https://blog.csdn.net/weixin_44657829/article/details/105716056HTML实现（导航栏）：https://blog.csdn.net/weixin_44657829/article/details/105326856效果图如下：<!DOCTYPE html><html lang="en"><head&gt.
复制链接

扫一扫