JS实现鼠标经过悬浮切换

<title>JS实现鼠标经过悬浮切换</title>
<!-- //js实现鼠标悬浮切换 setTab 代码实现 -->
<style>
.Menubox{width: 400px;height: 400px;margin: auto;}
.Menubox ul li{width: 100px;height: 50px;background-color: #CCCC00;margin-top: 10px;text-align: center;line-height: 50px;}
.Contentbox div{width: 600px;height: 100px;margin: auto;}
</style>

<div class="Menubox">
<ul>
<li id="one1" onmouseover="setTab('one',1,4)" >新闻1</li>
<li id="one2" onmouseover="setTab('one',2,4)" class="hover">新闻2</li>
<li id="one3" onmouseover="setTab('one',3,4)">新闻3</li>
<li id="one4" onmouseover="setTab('one',4,4)">新闻4</li>
</ul>
</div>
<div class="Contentbox">
<div id="con_one_1"style="background:#CCCC00;">新闻列表1</div>
<div id="con_one_2" style="background:#FFCCCC;display:none">新闻列表2</div>
<div id="con_one_3" style="background:#CCCCFF;display:none">新闻列表3</div>
<div id="con_one_4" style="background:#99CC33;display:none">新闻列表4</div>
</div>


</body>

<script>
function setTab(name, cursel, n) {
for (i = 1; i <= n; i++) {
var menu = document.getElementById(name + i);
var con = document.getElementById("con_" + name + "_" + i);
menu.className = i == cursel ? "hover" : "";
con.style.display = i == cursel ? "block" : "none";
}
}
</script>

分享名称：JS实现鼠标经过悬浮切换
本文地址：https://www.cdcxhl.com/news27/148327.html

成都网站建设公司_创新互联，为您提供App开发、品牌网站建设、动态网站、云服务器、网页设计公司、用户体验

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联