鼠标悬停在一级菜单上，淡出二级菜单怎么实现 显示二级菜单
鼠标悬停在一级菜单上，淡出二级菜单怎么实现
<html>
<head>
<script type="text/javascript" src="/Script/jquery-1.4.2.js">
</script>
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function(){
alert("1111")
$("#11").hover(
function(){
$("#22").fadeIn()
},function(){
$("#22").fadeOut()
}
)
})
</script>
</head>
<body>
<div id="11">
kkkkk
<div id="22" style="display:none">
<a href="#">111</a><br>
<a href="#">222</a><br>
<a href="#">333</a><br>
</div>
</div>
</body>
</html>
显示二级菜单？
原理很简单的了，
你看样式的结构
ul下的Li下的ul
HTML结构应该是这样：
ul
,li>一级菜单
ul>li>二级菜单
你设置一级菜单的LI，鼠标移上的时候，它里面的二级菜单LI显示出来就行了。
就是hover而已。
这个问题如果纠结这么久，真心推荐你认真看一下CSS的伪类的用法
js实现鼠标滑过显示二级菜单
鼠标滑过哪显示啥？
滑过 产品介绍 显示下面的子菜单？
onmouseover是鼠标移动到某元素执行的鼠标事件。
onmousemove是鼠标在某元素上移动执行的事件。
你先把这两个分清楚了，根据你的需求是
先获取你要鼠标滑过的元素 也就是产品介绍这个a元素,你给其设置一个id假如设置其为product
那么先获取他
var product=document.getElementById(product)
再获取你要显示的子菜单元素productInfo
var productInfo=document.getElementById(productInfo)
productInfo.style.display=none//设置其隐藏，如果CSS里已经隐藏，此步可以省略。
然后设置其鼠标事件，应该选择onmouseover
product.onmouseover=function(){
productInfo.style.display=block //鼠标移动到product元素上让其子菜单显示。
}
product.onmouseout=function(){
productInfo.style.display=block //鼠标移出product元素上让其子菜单隐藏。
}
如果你要让每个子菜单都读取他的子菜单可以循环遍历实现。思路相同。