我需要让 div 在悬停时可见
$(document).ready(function () {
$('.carousel').hover(function () {
$(this).parent().next('.semitransparentoverlay').fadeIn('200');
},
function () {
$(this).parent().next('.semitransparentoverlay').fadeOut('200');
});
});
但是在悬停时 div 一次又一次地变得可见
http://jsfiddle.net/n8b65qbb/14/
如何防止它并使 div 仅可见一次,然后仅在 mouselive 上将其隐藏一次?
最佳答案
如果您改为将鼠标悬停在父级上,并将叠加层移动到包装器内,这将防止叠加层淡入触发第二个悬停事件。
html,在 carousel-wrapper 内部移动覆盖层:
<div class="block-11 block-1">
<div class="carousel-wrapper" id="carousel-1">
<ul class="carousel clearfix">
<li><img src="http://i.imgur.com/eTxMX2T.jpg" alt="" width="646" height="350"/></li>
</ul>
<div class="semitransparentoverlay">
<input name="" type="button" value="Show all" class="btn-1"/>
</div>
</div>
Jquery,针对悬停的 carousel-wrapper:
$(document).ready(function () {
$('.carousel-wrapper').hover(function () {
$(this).children('.semitransparentoverlay').fadeIn('200');
},
function () {
$(this).children('.semitransparentoverlay').fadeOut('200');
});
});
关于javascript - 使 div 在悬停时可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26204694/