$("p").css("background-color","yellow")
})
只写mouseenter的动效的话,鼠标经过之后,状态会一直保留,如果想要鼠标离开之后出现新的状态,就在后面再加一个mouseleave事件,
如果简单一点的,hover就可以直接完成,但是hover是包含鼠标进入和离开2种状态的。
<img src="xxx.jpg" alt="要显示的文字">在img标签里写alt属性,alt里的内容就是当鼠标停留在图片时显示的内容。
希望对你有帮助!
如果我猜的不错的话,你用的方法是鼠标在一级上时,二级的display设置为block,当鼠标离开一级时display为none。所以当你的鼠标离开一级指向二级时二级隐藏了。你可以这样写,当鼠标指向一级节点时,它的二级节点为显示,而其他一级节点的二级节点隐藏;当鼠标离开时不需要做函数处理。
下面是我做的一个简单的例子,希望对你有帮助
<!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/htmlcharset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
li{
float:left
border:1px solid red
}
li ul li{
position:relative
border:none
background:#0FF
float:none
}
li ul{
display:none
}
</style>
<script type="text/javascript" >
function testShow(num){
//alert("the show")
for(var i=1i<5i++){
var obj=document.getElementById("test"+i)
obj.style.display="none"
}
var obj1=document.getElementById("test"+num)
obj1.style.display="block"
}
</script>
</head>
<body>
<input type="button" value="click" onclick="testShow()" />
<ul>
<li onmouseover="testShow(1)">第一个第一层
<ul id="test1">
<li>第一个第二层</li>
<li>第一个第二层</li>
</ul>
<li onmouseover="testShow(2)">第二个第一层
<ul id="test2" >
<li>第二个第二层</li>
<li>第二个第二层</li>
</ul>
<li onmouseover="testShow(3)">
第三个第一层
<ul id="test3">
<li>第三个第二层</li>
<li>第三个第二层</li>
</ul>
</li>
<li onmouseover="testShow(4)">
第四个第一层
<ul id="test4" >
<li>第四个第二层</li>
<li>第四个第二层</li>
</ul>
</li>
<li></li>
</ul>
</body>
</html>