$(selector).hover(handlerInOut) 。
等同于：$( selector ).on( "mouseover mouseout", handlerInOut )
就可以触发鼠标放上去的事件。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> </head> <style type="text/css"> .wrap {width: 500px height: 500px margin: 0 auto border: 1px solid blue }.con {width: 80% height: 100px margin: 40px auto border: 1px solid black }/*必须在父级hover，兼容：IE6+*/.one:hover p {color: red }/*标签内要加data-title属性，兼容：IE9+*/.two:hover::before {content: attr(data-title)/*取到data-title属性的值*/color: green }.three:hover::after {content: attr(data-title)/*取到data-title属性的值*/color: blue }</style> <body> <p> <p class="con one"> <span>鼠标移进来</span> <p>颜色会变哦</p> </p> <p class="con two" data-title="看我七十二变"> <span>鼠标移进来</span> <p>文字会变哦</p> </p> <p class="con three" data-title="看我七十二变"> <span>鼠标移进来</span> <p>文字会变哦</p> </p> </p> </body></html><!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>
<script src="jquery.js"></script>
<script>
$(function(){
$("#list li").live("mouseover",function(){
$("#res").html($(this).html()+"MouseOver")
})
$("#list li").live("mouseout",function(){
$("#res").html($(this).html()+"MouseOut")
})
var index=1
$("#add").click(function(){
$("#list").append("<li>元素"+(index++)+"</li>")
})
})
</script>
</head>
<body>
<input type="button" id="add" value="添加元素"/>
<ul id="list">
<li>A</li>
<li>B</li>
</ul>
<div id="res"></div>
</body>
</html>
说明，jQuery版本是1.8.3,测试可用。
希望对你有帮助 。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）