Question

Im not so good with JavaScript or jQuery, but I’m trying to get an image to show when I hover over the <div> element. The problem is that it is happening with the other ones too.

$(document).ready(function () {

    $("#event .event").hover(function () {
        $(".event img").show("slow");
    },
    $(".event img").mouseout(function () {
        $(".event img").hide("slow");
    }));

});

Html code:

<div id="event">
    <div class="event">
         <h4>name1</h4>

        <p>some text1</p>
        <img style='position:relative; display:none;' src='img1' alt='' />
    </div>
    <div class="event">
         <h4>name2</h4>

        <p>some text2</p>
        <img style='position:relative; display:none;' src='img2' alt='' />
    </div>
</div>

But the image is coming on both, or all five if I have five.. Some help?

Answer 1

Try this. IMO this solution is easier to understand.

$(document).ready(function () {
    $("#event .event").hover(function () {
        $(this).find('img').show();
    }, function(){
       $(this).find('img').hide();
    });
});