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

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

具体内容如下

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

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如何实现鼠标悬浮页面切换效果"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！