jQuery - target specific element with same class

Question

I'm new to jq to excuse me if I'm not clear enough.

fiddle:

http://jsfiddle.net/tWHpA/1/

On hover both divs slide up, how an I make it to slide up only the div that's been hovered on?

html:

<div class="span1 green 1"><div class="hover">tile title</div><a href="#page2" rel="ajax"></a></div>
<div class="green 2"><div class="hover">tile1 title</div></div>

css:

.green {width: 100px; height: 100px; background: red; color: white; position: relative; z-index:100;}      
.hover {width: 100px; height: 50px; background: yellow; position: absolute; bottom:0; display:none; z-index:-1;   }

jq:

$(document).ready(function() {

    $('.green').addClass('.hover');


   $('.green').hover(function() {

          $('.hover').stop(true, true).slideDown('1000')

    },

    //Mouseout, fadeOut the hover class


    function() {

        $('.hover').stop(true, true).slideUp('1000');

    }).click(function() {

        //Add selected class if user clicked on it
        $(this).addClass('selected');


    });
});

jfriend00 · Accepted Answer · 2013-03-30 19:11:05Z

3

Inside your event handler, use $(this) instead of $(".hover").

This will operate on only the element that is receiving the event instead of all the elements. this is set by jQuery to be the element that triggered the event.

$('.green').hover(function() {
    $(this).stop(true, true).slideDown('1000')
},function() {
    $(this).stop(true, true).slideUp('1000');
}).click(function() {
    //Add selected class if user clicked on it
    $(this).addClass('selected');
});

I think you have a logic problem though because once you slide up, the element that is no longer hovered, then there is no way to put the mouse over it again to get it to drop down.

After changing your logic a bit, you can see it work here: http://jsfiddle.net/jfriend00/6Szyb/

edited Mar 30, 2013 at 19:11

answered Mar 30, 2013 at 18:59

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1339164 Over a year ago

was trying exactly the same, but doesn't do it for me

jfriend00 Over a year ago

@user1339164 - see the comment I added at the end of my answer because you have a logic problem. If you slideUp when the mouse leaves, then there's no way to ever get the element to slideDown again because you can't hover an element that isn't visible. You need to explain more clearly what you're trying to accomplish in your design.

jfriend00 Over a year ago

@user1339164 - After changing your logic a bit (to elements don't get hidden), you can see it work here: jsfiddle.net/jfriend00/6Szyb

palaѕн · Accepted Answer · 2013-03-30 19:11:26Z

0

Try this:

$(document).ready(function () {

    $('.green').addClass('.hover');
    $('.green').hover(function () {
        $(this).find('.hover').stop(true, true).slideDown('1000')
    },

    function () {
        $(this).find('.hover').stop(true, true).slideUp('1000');

    }).click(function () {

        //Add selected class if user clicked on it
        $(this).addClass('selected');
    });
});

answered Mar 30, 2013 at 19:11

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Collectives™ on Stack Overflow

jQuery - target specific element with same class

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related