JavaScript如何实现鼠标悬浮页面切换效果

2023-06-29 17:06:53 820人浏览薄情痞子

摘要

这篇文章主要为大家展示了“javascript如何实现鼠标悬浮页面切换效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JavaScript如何实现鼠标悬浮页面切换效果”这篇文章吧。具体内容如下

这篇文章主要为大家展示了“javascript如何实现鼠标悬浮页面切换效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JavaScript如何实现鼠标悬浮页面切换效果”这篇文章吧。

具体内容如下

前几天做了个常见的页面悬浮效果，直接上图。

JavaScript如何实现鼠标悬浮页面切换效果

html代码

<!DOCTYPE html><html>    <head>        <link rel="stylesheet" type="text/CSS" href="css/4.css" />        <script type="text/javascript" src="js/Jquery-3.3.1.min.js"></script>        <script type="text/javascript" src="js/4.js"></script>    </head>    <body>        <div class="zong">            <div class="tab">                <ul>                    <li class="xuanxiangkuang">娱乐</li>                    <li class="xuanxiangkuang">美容</li>                    <li class="xuanxiangkuang">网购</li>                </ul>            </div>            <div class="content">            <div>这是关于娱乐新闻的内容</div>            <div>这是关于美容的内容</div>            <div>这是关于网购的天地</div>            </div>        </div>    </body></html>

JS:

$(function() {    $(".content div:gt(0)").hide();//隐藏类是content的标签下的脚标大于0的div    $(".tab li").css("cursor", "pointer");//光标变小手    $(".tab li").hover(//悬浮变色，不悬浮恢复颜色        function() {            $(this).addClass("pink");        },        function() {            $(this).removeClass("pink");    }).mouseover(function() {        $(".content div").eq($(this).index()).siblings().hide().end().show();    })});

CSS:

body,div,ul{    padding:0px;    margin:0px;}.zong{    width:800px;    margin:150px;}.tab li{        list-style:none;        float:left;    margin-right:10px;    line-height:30px;    height:30px;    width:65px;    text-align:center;}.content{    border:solid 1px black;        clear:both;}.content div{        border-top:1px;    height:60px;}.xuanxiangkuang{        border:solid 1px black;    background-color:#ffffff;    bottom:-1px;    position:relative;    z-index:1}.pink{    background-color: #FF1493;}

以上是“JavaScript如何实现鼠标悬浮页面切换效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JavaScript如何实现鼠标悬浮页面切换效果

本文链接: https://www.lsjlt.com/news/326034.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341