js+css制作鼠标感应切换选项卡特效，当用户的鼠标经过时延迟切换显示，可根据自己的需求来自定义延长时间。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>js+css鼠标感应延迟切换选项卡菜单效果_武鸣人</title>
<style type="text/css">
.wuming{font-size:12px;width:200px;line-height:30px;}
.wuming ul,li{list-style:none;margin:0px;padding:0px;}
.wuming .tab_wuming_ren{clear:both;height:30px;}
.wuming .tab_wuming_ren ul{color:#FFF;height:30px;}
.wuming .tab_wuming_ren li{display:inline;width:50px;height:30px;float:left;text-align:center;cursor:pointer;}
.wuming .Con_id{clear:both;background:#FF9900;height:70px;text-align:center;}
.wuming .ul_id1 {background:#000000;}
.wuming .ul_id1 .Li_id0{color:#FFFF00;}
.wuming .ul_id2 {background:#FF6600;}
.wuming .ul_id2 .Li_id1{color:#FFFF00;}
.wuming .ul_id3 {background:#3366FF;}
.wuming .ul_id3 .Li_id2{color:#FFFF00;}
.wumingbox{}
</style>
<script language="javascript">
//获取可操作的ID
function GetObj(objID){
if(document.getElementById){
return eval('document.getElementById("' + objID + '")');
}
else{
if(document.layers){
return eval("document.layers['" + objID + "']");
}
else{
return eval('document.all.' + objID);
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
var Me;
function TagTab(arr){
this.curTab=arr[0];
this.arr = arr;
for(var i=0;i<arr.length;i++){
var lis = arr[i].getElementsByTagName("li");
for(var j=0;j<lis.length;j++){
lis[j].tag=j;
lis[j].fac=this;
lis[j].onmouseover =function(){
Me=this;
window.setTimeout("Me.fac.show("+this.tag+");",MDelayTime);
}
}
}
this.show = function(i){
this.curTab.style.display='none';
this.arr[i].style.display = 'block';
this.curTab = this.arr[i];
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
window.onload=function(){
var oneTab = new TagTab([GetObj("Con_id0"),GetObj("Con_id1"),GetObj("Con_id2")]);
var twoTab = new TagTab([GetObj("Con_id3"),GetObj("Con_id4"),GetObj("Con_id5")]);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//延迟标签
var MDelayTime=800;
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<!--第一个切换实体 -->
<div class="wuming" id="wuming_id0">
<!--Con_id0-->
<div class="Con_id" id="Con_id0">
<div class="tab_wuming_ren">
<ul class="ul_id1">
<li class="Li_id0" id="Tab_id0" >上海</li>
<li class="Li_id1" id="Tab_id1" >北京</li>
<li class="Li_id2" id="Tab_id2" >广州</li>
</ul>
</div>
<div class="wumingbox">上海的内容</div>
</div>
<!--Con_id1-->
<div class="Con_id" id="Con_id1" style="display:none;">
<div class="tab_wuming_ren">
<ul class="ul_id2">
<li class="Li_id0" id="Tab_id0" >上海</li>
<li class="Li_id1" id="Tab_id1" >北京</li>
<li class="Li_id2" id="Tab_id2" >广州</li>
</ul>
</div>
<div class="wumingbox">北京的内容</div>
</div>
<!--Con_id2-->
<div class="Con_id" id="Con_id2" style="display:none;">
<div class="tab_wuming_ren">
<ul class="ul_id3">
<li class="Li_id0" id="Tab_id0" >上海</li>
<li class="Li_id1" id="Tab_id1" >北京</li>
<li class="Li_id2" id="Tab_id2">广州</li>
</ul>
</div>
<div class="wumingbox">广州的内容</div>
</div>
</div>
<br>
<!--第二个切换实体 -->
<div class="wuming" id="wuming_id1">
<!--Con_id0-->
<div class="Con_id" id="Con_id3">
<div class="tab_wuming_ren">
<ul class="ul_id1">
<li class="Li_id0" id="Tab_id3">广东</li>
<li class="Li_id1" id="Tab_id4" >江苏</li>
<li class="Li_id2" id="Tab_id5">山东</li>
</ul>
</div>
<div class="wumingbox">广东的内容</div>
</div>
<!--Con_id1-->
<div class="Con_id" id="Con_id4" style="display:none;">
<div class="tab_wuming_ren">
<ul class="ul_id2">
<li class="Li_id0" id="Tab_id3" >广东</li>
<li class="Li_id1" id="Tab_id4" >江苏</li>
<li class="Li_id2" id="Tab_id5" >山东</li>
</ul>
</div>
<div class="wumingbox">江苏的内容</div>
</div>
<!--Con_id2-->
<div class="Con_id" id="Con_id5" style="display:none;">
<div class="tab_wuming_ren">
<ul class="ul_id3">
<li class="Li_id0" id="Tab_id3">广东</li>
<li class="Li_id1" id="Tab_id4" >江苏</li>
<li class="Li_id2" id="Tab_id5">山东</li>
</ul>
</div>
<div class="wumingbox">山东的内容</div>
</div>
</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处