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.