CODEWITHSUNDEEP
jqueryhtmlcss
Matthew
Matthew

Reputation: 2246

Why is jQuery mouseover not working?

I want it so when you hover over any one of the two images, it will trigger the corresponding <figcaption>. I have it so when you hover over ANY of the two images, it will only hide the first one. I'm not good with jQuery but I'm positive there is a way of doing it.

Here's the fiddle: http://jsfiddle.net/gxQkQ/2/

Upvotes: 0

Views: 739

Answers (3)

Amit Joki
Amit Joki

Reputation: 59292

Id's have to be unique.

Try this:

    $('img').mouseover(function(){
       $(this).next().slideUp(200);
    }).mouseleave(function(){
       $(this).next().slideDown(200);
    });

Demo: http://jsfiddle.net/AmitJoki/gxQkQ/4/

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388436

First: ID of an element must be unique so use class/element selector to group them

So

<figcaption class="caption">

then

$('figure').mouseover(function () {
    $(this).find('.caption').slideUp(200);
}).mouseleave(function () {
    $(this).find('.caption').slideDown(200);
});

Demo: Fiddle

Upvotes: 1

Sridhar R
Sridhar R

Reputation: 20418

Use $(this).find('figcaption') to get current hovered figcaption,

Try this

$(document).ready(function () {
    $('#q-omega').on('click', function () {
        $('#search-bar').fadeToggle(400);
    });
    $('figure').mouseover(function () {
        $(this).find('figcaption').slideUp(200);
    }).mouseleave(function () {
        $(this).find('figcaption').slideDown(200);
    });
});

DEMO

Upvotes: 1

Related Questions