滑过 产品介绍 显示下面的子菜单?
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元素上让其子菜单隐藏。
}
如果你要让每个子菜单都读取他的子菜单可以循环遍历实现。思路相同。
这个功能其实使用hover伪类即可实现,不需要js
给你一个思路,将子元素设置为默认display:none不可见。当鼠标移动到父元素的菜单列表时,激活子元素为display:block可见状态。
具体代码需要使用到hover伪类,例子如下。
<html><body>
<div class="menu">
<em>我是一级菜单</em>
<div class="menu_sub">
<p>我是二级折叠菜单</p>
</div>
</div>
<style>
.menu_sub{
display:none
}
.menu:hover > .menu_sub{
display:block
}
</style>
</body>
</html>