css中这个鼠标悬停效果怎么做(求代码),如图
发布网友
发布时间：2022-04-23 10:13
共4个回答
热心网友
时间：2022-04-06 12:18
以上需要的文件及图片
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/* 公用 */
body{ margin:0; overflow:hidden;}
img{ display:block;}
span{ display:block;}
a{ text-decoration:none; display:block; color:#000;}
p,h1,h2,h3,h4{ margin:0; font-weight: normal; font-size:12px;}
ul{ margin:0; padding:0;}
input{ margin:0; padding:0; outline:none; border:none;}
body{ font-family:"微软雅黑"; font-size:14px; background-color:#f2f2f2;}
body h2,h3,h4{ color:#000;}
ul{ margin:0; padding:0;}
li{ list-style:none;}
.clearfix{ clear:both;}
/*内容*/
.nav_box>li{ position:relative; float:left; width:100px; text-align:center; margin-top:10px; height:30px; cursor:default;}
.nav_box>li>h2{ border-right:1px solid #ccc; height:16px; margin-top:7px; font-weight:bold; width:90px; display:block; text-align:left; padding-left:16px; box-sizing:border-box;}
.nav_box>li>img{ position:absolute; top:12px; right:18px;}
.subnav_box{ position:absolute; top:30px; right:0px; width:300px; height:400px; background-color:#fff; box-sizing:border-box; padding:20px;}
.subnav_box ul{ float:left; margin-right:20px;}
.subnav_box ul>li{ line-height:24px;}
.nav_box>li:hover{ background-color:#fff;}
.nav_box li:hover .subnav_box{ display:block;}
</style>
<script src="jquery.js"></script>
<script>
$(function(){
$(".nav_box>li").mouseenter( function(){
$(".nav_box>li").children(".subnav_box").hide();
$(this).children(".subnav_box").show();
$(this).children("img").attr("src","img/arrow_bottom_gary.png");
}).mouseleave( function(){
$(".nav_box>li").children(".subnav_box").hide();
$(this).children("img").attr("src","img/arrow_top_gary.png");
}
);
})
</script>
</head>
<body>
<ul class="nav_box">
<li><h2>手机京东</h2>
</li>
<li><h2>客户服务</h2><img src="img/arrow_top_gary.png">
<div class="subnav_box" style=" left:-100px; display:none;">
<ul>
<li><b>特色栏目</b></li>
<li><a href="#">视频购物</a></li>
<li><a href="#">京*区</a></li>
<li><a href="#">视频购物</a></li>
<li><a href="#">京*区</a></li>
<li><a href="#">视频购物</a></li>
<li><a href="#">京*区</a></li>
</ul>
<ul>
<li><b>旗下网站</b></li>
<li><a href="#">视频购物</a></li>
<li><a href="#">京*区</a></li>
<li><a href="#">视频购物</a></li>
</ul>
</div>
</li>
<li><h2 style="border-width:0;">网站导航</h2><img src="img/arrow_top_gary.png">
<div class="subnav_box" style="display:none;">
<ul>
<li><b>特色栏目</b></li>
<li><a href="#">视频购物</a></li>
<li><a href="#">京*区</a></li>
<li><a href="#">视频购物</a></li>
<li><a href="#">京*区</a></li>
<li><a href="#">视频购物</a></li>
<li><a href="#">京*区</a></li>
</ul>
<ul>
<li><b>企业服务</b></li>
<li><a href="#">视频购物</a></li>
<li><a href="#">京*区</a></li>
</ul>
<ul>
<li><b>旗下网站</b></li>
<li><a href="#">视频购物</a></li>
<li><a href="#">京*区</a></li>
<li><a href="#">视频购物</a></li>
</ul>
</div>
</li>
</ul>
</body>
</html>
热心网友
时间：2022-04-06 13:36
你好，可以尝试使用单纯的css进行设置：
鼠标悬浮hover到ul的时候，li标签为dipaly设置为block；
默认的时候设置为：none；
热心网友
时间：2022-04-06 15:10
<!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=utf-8" />
<title>鼠标悬停</title>
<style>
body{margin:0; padding:0; font-size:12px; font-family:Microsoft Yahei; }
ul,li{margin:0; padding:0; list-style-type:none;}
#item_info{ }
#item_info .tab{background:#f3f3f3; height:29px; overflow:hidden; }
#item_info .tab ul{width:1000px; height:28px; margin:0 auto; }
#item_info .tab li{float:left; height:28px; line-height:28px; }
#item_info .tab li a{ display:inline-block; padding:0px 20px; height:28px; line-height:28px; text-decoration:none; background:url(../images/tab_off.gif) repeat-x; color:#666; font-size:12px; text-align:center; border-right: 1px solid #ddd; border-bottom:1px solid #ddd; }
#item_info .tab li a.on{background:#fff; font-weight:bold; text-decoration:none; color:#333; border-bottom:1px solid #fff; }
#item_info .tab li a.null{border-right: 1px solid #ddd; border-bottom:1px solid #fff; width:0px; padding:0; overflow:hidden; }
#item_info .info{ margin:0 auto; width:1000px; }
#item_info .info ul{display:none; width:270px; padding:5px; border:1px solid #ddd; border-top:0px; line-height:22px; overflow-y:auto;}
#item_info .info ul.on{display:block;}
#item_info .info ul dl{float:left; width:86px; margin:0; padding:0;}
#item_info .info ul dl dt{ font-weight:bold;}
#item_info .info ul dl dd{margin:0; padding:0; list-style-type:none; }
#item_info .info ul a{color:#666; text-decoration:none; }
#item_info .info ul a:hover{color:#C00; text-decoration:underline; }
</style>
</head>
<body>
<div id="item_info">
<div class="tab">
<ul>
<li><a href="javascript:void(0);" hidefocus="hidefocus" class="null" id="tab_0"></a></li>
<li><a href="javascript:void(0);" hidefocus="hidefocus" id="tab_1">手机京东</a></li>
<li><a href="javascript:void(0);" hidefocus="hidefocus" onmouseover="showInfo(2);" onmouseout="hiddenInfo(2);" id="tab_2">客户服务</a></li>
<li><a href="javascript:void(0);" hidefocus="hidefocus" onmouseover="showInfo(3);" onmouseout="hiddenInfo(3);" id="tab_3">网站导航</a></li>
</ul>
</div>
<div class="info">
<ul id="info_2" onmouseover="showInfo(2);" onmouseout="hiddenInfo(2);" >
<li><a href="javascript:void(0);">帮助中心</a></li>
<li><a href="javascript:void(0);" rel="nofollow">售后服务</a></li>
<li><a href="javascript:void(0);" rel="nofollow">在线客服</a></li>
<li><a href="javascript:void(0);" rel="nofollow">投诉中心</a></li>
<li><a href="javascript:void(0);">客服邮箱</a></li>
</ul>
<ul id="info_3" onmouseover="showInfo(3);" onmouseout="hiddenInfo(3);" >
<dl class="item fore1">
<dt>特色栏目</dt>
<dd>
<div><a href="javascript:void(0);">视频购物</a></div>
<div><a href="javascript:void(0);">京*区</a></div>
<div><a href="javascript:void(0);">在线读书</a></div>
<div><a href="javascript:void(0);">装机大师</a></div>
<div><a href="javascript:void(0);">礼品卡</a></div>
<div><a href="javascript:void(0);">家装城</a></div>
</dd>
</dl>
<dl class="item fore2">
<dt>企业服务</dt>
<dd>
<div><a href="javascript:void(0);">企业客户</a></div>
<div><a href="javascript:void(0);">办公直通车</a></div>
</dd>
</dl>
<dl class="item fore3">
<dt>旗下网站</dt>
<dd>
<div><a href="javascript:void(0);">360TOP</a></div>
<div><a href="javascript:void(0);">迷你挑</a></div>
<div><a href="javascript:void(0);">English Site</a></div>
</dd>
</dl>
</ul>
</div>
</div>
<script language="javascript" type="text/javascript">
// 显示
function showInfo(id) {
document.getElementById("tab_" + id).className = "on";
document.getElementById("info_" + id).className = "on";
}
// 隐藏
function hiddenInfo(id){
document.getElementById("tab_" + id).className = "";
document.getElementById("info_" + id).className = "";
}
</script>
</body>
</html>
热心网友
时间：2022-04-06 17:02
实现这个功能是js的事情，css只是定义下界面。
百度：js tab切换
