Question

I’ve read every post on stack on similar topics which there is many, but none seem to fixing the issue for me.

Basically, I have a ul of divs containing a single image, on hover I trigger a fade to 50% opacity. that works without an issue. now for one of the div’s I have a second image, absolutely positioned in the center of the div. when I hover said div the mouseover is triggered, however when the pointer passes above the second image it re-triggers the event.

please find code below

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>

As you can see it is the second li causing the issue once the pointer is over .prod-week, based on the search’s i’ve done I have tried using

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

etc, to no effect.

if anyone could give insight or point out the obvious mistake i’m missing it would be greatly appreciated.

Answer 1

You need to use .mouseenter() and .mouseleave().

$('.lighter').mouseenter(function() {
  $(this).fadeTo(200, 0.5);
});
$('.lighter').mouseleave(function() {
  $(this).fadeTo(200, 1);
});​

Or, .hover() for short.

$('.lighter').hover(function(){
  $(this).fadeTo(200, 0.5);
}, function(){
  $(this).fadeTo(200, 1);
});​

Your actual solution using .stop() only make it unnoticeable for the eye but if you log the triggering of the function then you will see it keeps being the same.

An example.