我已经阅读了堆栈上关于类似主题的所有帖子,其中有很多,但似乎没有一个能为我解决问题。
基本上,我有一个 ul 的 div 包含一个图像,在悬停时我触发淡入淡出到 50% 的不透明度。没有问题。现在对于其中一个 div,我有第二张图片,绝对位于 div 的中心。当我悬停说 div 时,鼠标悬停被触发,但是当指针经过第二个图像上方时,它会重新触发事件。
请在下面找到代码
JQuery
jQuery('.lighter').mouseover(function() {
jQuery(this).fadeTo(200, 0.5);
});
jQuery('.lighter').mouseout(function() {
jQuery(this).fadeTo(200, 1);
});
html
<ul class="home-three-columns">
<li>
<a href="#">
<div class="lighter">
<img class="first" src="<?php echo $this->getSkinUrl('images/gift-finder.jpg') ?>" alt="" />
</div>
</a>
</li>
<li style="position:relative;">
<a href="#">
<div class="lighter">
<img class="mid" src="<?php echo $this->getSkinUrl('images/product-of-the-month.jpg') ?>" alt="" />
<img class="prod-week" src="<?php echo (string)Mage::helper('catalog/image')->init($product, 'image')->resize(68, 86);?>" style="position:absolute; top:99px; left:89px;" />
</div>
</a>
</li>
<li>
<a href="#">
<div class="lighter">
<img class="last" src="<?php echo $this->getSkinUrl('images/in-the-press.jpg') ?>" alt="" />
</div>
</a>
</li>
</ul>
如您所见,这是指针超过 .prod-week 后导致问题的第二个 li,基于我已尝试使用的搜索
jQuery('.lighter').not('.prod-week').mouseover(function() {
jQuery(this).fadeTo(200, 0.5);
});
等,无效。
如果有人能提供见解或指出我遗漏的明显错误,将不胜感激。
最佳答案
您需要使用 .mouseenter()
和 .mouseleave()
.
$('.lighter').mouseenter(function() {
$(this).fadeTo(200, 0.5);
});
$('.lighter').mouseleave(function() {
$(this).fadeTo(200, 1);
});
或者,.hover()
简称。
$('.lighter').hover(function(){
$(this).fadeTo(200, 0.5);
}, function(){
$(this).fadeTo(200, 1);
});
您使用 .stop()
的实际解决方案只会让眼睛看不到它,但如果您记录该功能的触发,那么您会看到它一直保持不变。
关于javascript - Jquery 鼠标悬停在 child 身上触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11378802/