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

本文实例为大家分享了javascript实现鼠标悬浮页面切换效果的具体代码,供大家参考,具体内容如下

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

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

html代码
2


  • 娱乐
  • 美容
  • 网购[/php]

    这是关于娱乐新闻的内容[/php]

    这是关于美容的内容[/php]

    这是关于网购的天地[/php]
    [/php]
    [/php]

    [/php]
    JS:
    2

    $(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();
    })
    });

    [/php]
    CSS:
    2

    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;
    }

    [/php]
    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

标签

发表评论