脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js鼠标悬浮页面切换效果

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

 更新时间：2022年03月30日 17:23:27   作者：某次最深刻的慢镜  
这篇文章主要为大家详细介绍了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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论