Question

I’ve tried so many combinations and this one is the nearest I could get to what I need.

What I need is an image (img1), with another (smaller) image (img2) over it, and when I rollover img1 I want it to fade in (and fade out on roll out), leaving img2 untouched.
The problem I’m getting is that when I rollover img2, that is over img1, Jquery think’s I’m rolling out img1 and fades it out!

This is what I have so far:

.photo_link {
    position: relative;
    float: left;
    display: block;
    width: 133px;
    height: 410px;
    margin-top: 9px;
}
#home_1 {
    background-image: 'photo_home_1.jpg');
}
.new {
    border: 0;
    position: absolute;
    top: 20px;
}

<a class="photo_link">
    <span class="photo" id="home_1"></span>
    <img class="new src="new.png" />
</a>

$(function(){
    $('.photo')
        .mouseover(function(){
            $(this).stop().fadeTo("fast", 1);
        })
        .mouseout(function(){
            $(this).stop().fadeTo("slow", 0.2);
        })
});

Is there any way of avoiding this?

Answer 1

I would add the mouse events to the .photo_link element, and use $.mouseenter() and $.mouseleave(), which are not triggered when the mouse is no longer “over” an element when mousing “out” and over an element within it:

$(function(){
    $('.photo_link')
        .mouseenter(function(){
            $(this).find('img').stop().fadeTo("fast", 1);
        })
        .mouseleave(function(){
            $(this).find('img').stop().fadeTo("slow", 0.2);
        })
});

http://jsfiddle.net/CMyAZ/

If you float; left, you don’t need display: block (which is implied). I cleaned up your CSS some. Also, I imagine you want to hide (opacity: 0.2) the element on page load (see Quirksmode for cross-browser opacity):

.photo_link {
    position: relative;
    float: left;
    width: 128px;
    height: 128px;
    margin-top: 9px;
}
#home_1 {
    position: absolute;
    z-index: 1;
    display: block;
    top: 20px;
    left: 0;
    height: 32px;
    width: 32px;
    background: url('http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=32&d=identicon&r=PG');
}
.new {
    position: absolute;
    top: 20px;
    left: 0;
    border: 0;
    opacity: 0.2;
}