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实现鼠标悬浮页面切换效果】以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    推荐阅读