1

我已经阅读了堆栈上关于类似主题的每一篇文章，其中有很多，但似乎没有一个可以为我解决这个问题。

基本上，我有一个 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);
    });

等，没有效果。

如果有人可以提供见解或指出我遗漏的明显错误，将不胜感激。

4

2 回答 2

3

您需要使用.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()仅使其不明显，但如果您记录该功能的触发，那么您会看到它保持不变。

一个例子。

于 2012-07-07T22:06:18.930 回答
0

似乎以某种方式在动画中添加一个停止解决了这个问题。

jQuery('.lighter').mouseover(function() {
    jQuery(this).stop().fadeTo(200, 0.5);
});
jQuery('.lighter').mouseout(function() {
    jQuery(this).stop().fadeTo(200, 1);
});

不太确定如何解决它，如果有人想发表评论！

于 2012-07-07T21:50:34.523 回答