代码如下:
<a href="#" class="aaa"> <span>讲文明树新风公益广告</span> <div class="bbb"> <div class="ccc"> <p>美丽浙江 文明相伴</p> </div> </div> </a>
jquery部分:
$(".aaa").mouseover(function() { if (!$(".bbb").is(":animated")){ $(".bbb").fadeIn(420).find("div").animate({ "opacity": "show", "margin-top": 0 }, 800); } }) $(".aaa").mouseleave(function() { $(".bbb").fadeOut(400); $(".bbb").find("div").css({ "margin-top": "120px", "opacity": "hide" }) })
主要就是mouseleave事件下,看着源代码,鼠标移走时.bbb的margin-top时而生效,
时而不生效。很是奇怪。不知道有没有朋友也遇到过这种情况,造成这种情况的原因是什么。
jquery CSSの変更が反映されませんか? -PHP中国語サイトQ&A-jqueryのcss変更が反映されない? -PHP中国語サイトQ&A
ぜひ見て学んでください。
mouseover一般和mouseout一起用,mouseenter和mouseleave。
区别是mouseover和mouseout事件冒泡,mouseenter和mouseleave不冒泡。
冒泡的意思是… 子元素上发生的事件会传递到父元素 再到爷爷元素…一直传到document 。