CODEWITHSUNDEEP
jquery
nodde
nodde

Reputation: 53

jquery show/hide

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?

Upvotes: 1

Views: 104

Answers (3)

Andreas
Andreas

Reputation: 2376

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();
    });
});

Upvotes: 0

Sampson
Sampson

Reputation: 268482

The second parameter of the $ function is often times used to define the context. Meaning, your selector will be used relative to a particular element, or selector.

$(".event") // finds all .event elements
$(".event", this) // finds all .event elements within 'this'

With this in mind, we can modify your code to look within the .event element currently being entered or existed to find the appropriate image:

​$("#event .event").on({
    mouseenter: function(){
        $("img", this).show();
    },
    mouseleave: function(){
        $("img", this).hide();
    }
});​​​

This binds some logic to every element that matches the #event .event selector. Each one of these will have a handler bound to their mouseenter and mouseleave events. Anytime you hover one of those elements matched by the selector, we reference that particular element using the this keyword.

If you enter the first #event .event element on the page, this refers to that element. Likewise, if you exit that element, this refers to that element being exited. Recalling the first point of this response, that means $("img", this) will target every image within the element raising the mouseenter or mouseleave events to begin with.

Also, double-check your use of .hover(); this method takes two parameters, functions, that will be called when you mouseenter and when you mouseleave, respectively:

$("#event .event").hover( showImages, hideImages );

function showImages () {
    $("img", this).show();
}

function hideImages () {
    $("img", this).hide();
}

Or you could place those directly inside the .hover method as anonymous functions:

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

Upvotes: 1

adeneo
adeneo

Reputation: 318352

You're hiding and showing all the images, you need to use the this keyword to target only the current element, not all of them, here is another simpler solution using toggle:

$(document).ready(function(){
    $("#event .event").on('mouseenter mouseleave', function() {
            $('img', this).toggle(e.type=='mouseenter');
    });
});

Upvotes: 0

Related Questions