js实现鼠标滑过显示二级菜单

JavaScript015

js实现鼠标滑过显示二级菜单,第1张

鼠标滑过哪显示啥?

滑过 产品介绍 显示下面的子菜单?

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元素上让其子菜单隐藏。

}

如果你要让每个子菜单都读取他的子菜单可以循环遍历实现。思路相同。

思路是这样的

首先定义两个变量 disX 和 disY 为0  是鼠标初始的位置。

在用js 事件 判断鼠标滑过的距离.

当前的X,Y距离减去初始的就是鼠标滑过的

不会啊

我测试了一下,不会消失啊!

要不,你改成下面这样试试

<script type="text/javascript" language="javascript" >

<!--

function display(){

document.getElementById("box").style.display="block"

}

function disappear(){

document.getElementById("box").style.display="none"

}

-->

</script>

<div class="login" onmouseover="display()" onmouseout="disappear()"><a href="#" class="outlogin">登录</a>

<div id="box" class="dl" style="display:none">

<form>

<div class="inputbox"><input class="logininput" type="text" placeholder="请输入用户名"></div>

<div class="inputbox2"><input class="logininput" type="text" placeholder="请输入密码"></div>

<a href="#">登 录</a>

</form>

<div class="qtdl"><a href="#" class="weibologin">微博登录</a><a href="#" class="qqlogin">QQ登录</a></div>

</div>

</div>