Question

I want to make a hover effect on a image. That works fine! But i also have a text on top of the image that’s in a div. When i hover it the image in the background goes back..

Simply put, i want a hover effect on the image only when i mouseover both the text or image..

You can see how it works here: http://notre.co/nav

$(document).ready(function() {
    $('img').each(function() {
       $(this).hover(function() {
           $(this).stop().animate({ opacity: 0.3 }, 200);
       },
       function() {
           $(this).stop().animate({ opacity: 1.0 }, 800);
       });
    });
});

Answer 1

Seeing that you have this structure:

<div class="image">
    <a href="..." target="_blank">
        <img src="..." border="0" style="opacity: 1; ">
    </a>
    <div class="text">...</div>
</div>

You should attach the hover events to the parent .image div instead:

$('.image').hover(function () {
    $(this).find('img').stop().animate({ opacity: 0.3 }, 200);
}, function () {
    $(this).find('img').stop().animate({ opacity: 1.0 }, 200);
});

Note that I didn’t include the .each() as by default jQuery will iterate through each element when attaching event handlers (in fact, for most operations).

---

As mentioned by mVChr in the comments, the '.image' selector should be changed to 'ul.sc_menu li' if you want the effect to work when hovering over the “author” text as well.