CODEWITHSUNDEEP
jquery
sledgeweight
sledgeweight

Reputation: 8095

Only target one div .on() hover, not all - Jquery

I'm currently using the code to animate opacity to 1 on mouseenter of an image and back to 0 again on mouseleave. Instead of it displaying one image, it displays all on hover.

I've tried using (this) instead of (.project-hover img) so it only affects that particular div but I need to target (.project-hover img) instead of .span4 upon which the function is initiated from.

How would I go about achieving this?

$(document).ready(function() {
    $(".span4").on("mouseenter", function() {
        $('.project-hover img').stop();//halts previous animation if it's running
        $('.project-hover img').animate({
            opacity: 1
        });
    }).on("mouseleave", function() {
        $('.project-hover img').stop();
        $('.project-hover img').animate({
            opacity: 0
        });
    });
});

HTML

<div class="span4">
    <div class="wrap-title">
        <div class="position">
            <div class="title"><a href="<?php echo get_permalink(); ?>"><?php the_title();?></a></div>
            <div class="tags"><?php echo $cats; ?> </div>
        </div>
    </div>  
    <div class="project-hover"><img src="<?php echo catch_that_image(); ?>">    </div>
</div>

Upvotes: 0

Views: 2300

Answers (4)

Blowsie
Blowsie

Reputation: 40535

Use find() see documentation... http://api.jquery.com/find/

$(document).ready(function() {
    $(".span4").on("mouseenter", function() {
        $(this).find('.project-hover img').stop();//halts previous animation if it's running
        $(this).find('.project-hover img').animate({
            opacity: 1
        });
    }).on("mouseleave", function() {
        $(this).find('.project-hover img').stop();
        $(this).find('.project-hover img').animate({
           opacity: 0
        });
    });
});

Update:

You should also be chaining your methods for efficiency, and you probally want to be passing in true, true to your .stop() method. (to prevent queue iusses)

 $(document).ready(function() {
        $(".span4").on("mouseenter", function() {
            $(this).find('.project-hover img').stop(true, true).animate({
                opacity: 1
            });
        }).on("mouseleave", function() {
            $(this).find('.project-hover img').stop(true, true).animate({
               opacity: 0
            });
        });
    });

Upvotes: 3

sledgeweight
sledgeweight

Reputation: 8095

There is a CSS solution I've found here incase anyone wanted this simpler alternative for future reference:

css: show div when another div is hover

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816364

this refers to the current .span4 element the user is hovering over, so all you have to do is find the target element inside of it:

$(this).find('.project-hover img').animate(...);

From the documentation:

When jQuery calls a handler, the this keyword is a reference to the element where the event is being delivered; for directly bound events this is the element where the event was attached and for delegated events this is an element matching selector. (Note that this may not be equal to event.target if the event has bubbled from a descendant element.) To create a jQuery object from the element so that it can be used with jQuery methods, use $(this).

List of DOM traversal methods: http://api.jquery.com/category/traversing/tree-traversal/

Upvotes: 0

Atif
Atif

Reputation: 10880

$(".span4").on("mouseenter", function() {
        $('.project-hover img', $(this)).stop();//halts previous animation if it's running
        $('.project-hover img', $(this)).animate({
            opacity: 1
        });
    }).on("mouseleave", function() {
        $('.project-hover img', $(this)).stop();
        $('.project-hover img', $(this)).animate({
           opacity: 0
        });
    });

Upvotes: 0

Related Questions