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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)