这篇文章主要为大家展示了“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;
}以上是“JavaScript如何实现鼠标悬浮页面切换效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
