Jquery mouseover触发孩子

时间:2012-07-07 21:33:58

标签: javascript jquery mouseevent mouseover

我已经阅读了关于类似主题的堆栈上的每个帖子,但是似乎没有人能解决这个问题。

基本上,我有一个包含单个图像的ul的div,在悬停时我触发淡入淡出到50%的不透明度。这没有问题。现在对于其中一个div我有第二个图像,绝对位于div的中心。当我悬停所说的div时会触发mouseover,但是当指针经过第二个图像时,它会重新触发事件。

请找到以下代码

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,它就是导致问题的第二个问题,基于我已经完成的搜索,我尝试过使用

jQuery('.lighter').not('.prod-week').mouseover(function() {
        jQuery(this).fadeTo(200, 0.5);
    });

等,没有效果。

如果有人能提供见解或指出我错过的明显错误,我将不胜感激。

2 个答案:

答案 0 :(得分: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()的实际解决方案只会使其无法察觉,但如果您记录该功能的触发,那么您将看到它保持不变。

An example

答案 1 :(得分:0)

似乎是以某种方式为动画添加一个停止来解决问题。

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

如果有人愿意发表评论,不太确定如何修复它!