我有一个简单的画廊网格与嵌套跨度显示标题,我想滑过鼠标,并隐藏在鼠标。jQuery的鼠标悬停效果错误,鼠标悬停事件总是在鼠标悬停触发几次
一切工作正常,除非鼠标向下移动到标题所在的位置,并且/或者从平铺底部将平铺的平铺展开,那么悬停效果将无法控制地重复几次。
起初我以为这可能是因为跨度被包含在悬停触发器的锚点中,但移出它也不起作用。
任何想法?
演示是在这里:http://www.winterealm.com/gallery/
标记:
<div class="gallery_container">
<ul>
<li><a href=""><img src="assets/img/artistisch.jpg" alt="aaa"/><span class="title">Category A</span></a></li>
<li><a href=""><img src="assets/img/attraktiv.jpg" alt="bbb"/><span class="title">Category B</span></a></li>
<li><a href=""><img src="assets/img/historisch.jpg" alt="ccc"/><span class="title">Category C</span></a></li>
<li><a href=""><img src="assets/img/popart.jpg" alt="ddd"/><span class="title">Category D</span></a></li>
<li><a href=""><img src="assets/img/portrait.jpg" alt="eee"/><span class="title">Category E</span></a></li>
<li><a href=""><img src="assets/img/sketch.jpg" alt="fff"/><span class="title">Category F</span></a></li>
</ul>
</div>
这里是jQuery的
$(document).ready(function(){
$('.gallery_container a').mouseover(function(){
$(this).children('.title').animate({
opacity: 100,
bottom: 0
},200);
});
$('.gallery_container a').mouseout(function(){
$(this).children('.title').animate({
opacity: 0,
bottom: -30
},200);
});
});
是的,最短的解决方案=最好的!这似乎是这样做的方式!非常感谢! – Winterain