CSS问题:怎样让鼠标经过按钮时发生的状态一直停留在当页呢?

html-css013

CSS问题:怎样让鼠标经过按钮时发生的状态一直停留在当页呢?,第1张

$("p").mouseenter(function(){

$("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>