CODEWITHSUNDEEP
javascriptjquery
Rhys Wynne
Rhys Wynne

Reputation: 394

Targeting Child instance of single class using jQuery mouseover

Having an issue trying to target a single instance of a child div when the mouse rolls over the parent div.

The code currently written works fine when there is only one instance of the .slidswap_moused_over (parent) class on the page, however if there is more than one, both maintain the same width.

Here is the "most working" jQuery I have:-

jQuery(function() {
    jQuery(".slidswap_moused_over").mousemove(function(e) {

         var offset = jQuery(this).offset();
         var relativeX = (e.pageX - offset.left);
         var relativeY = (e.pageY - offset.top);
         jQuery(".slidswap_left_image").css({ "width": relativeX });
         jQuery('.slidswap_drag_message').css({ "opacity": 0 });
    });
});

Demo here - http://jsfiddle.net/5DjPw/5/

I know I should be using either .parent, .children, .siblings or .next, but I'm not sure the syntax.

Any help would be appreciated :)

Upvotes: 0

Views: 57

Answers (3)

Shane Jones
Shane Jones

Reputation: 905

Think I've fixed it here for you? Sorry if I've over tweaked some parts.

jQuery(function($) {
    $(".slidswap_moused_over")

    .each(function(){

        $(this)

        .mousemove(function(e) {

            var offset = $(this).offset();

            var relativeX = (e.pageX - offset.left);
            var relativeY = (e.pageY - offset.top);

            $(this).find(".slidswap_left_image").css({ "width": relativeX });

        })

        .mouseover(function(e){
            $(this).find(".slidswap_drag_message").animate(
                { 
                    "opacity": 0 
                },250);
        });

    })

});

http://jsfiddle.net/shanejones/5DjPw/9/

Upvotes: 1

ramby
ramby

Reputation: 96

use jQuery(this) to hold the individual .slidswap_moused_over

see the script:-

jQuery(function() {
    jQuery(".slidswap_moused_over").mousemove(function(e) {

        var offset = jQuery(this).offset();
        var relativeX = (e.pageX - offset.left);
        var relativeY = (e.pageY - offset.top);
        jQuery(this).find(".slidswap_left_image").css({ "width": relativeX });
        jQuery(this).find('.slidswap_drag_message').css({ "opacity": 0 });
    });
});

Upvotes: 1

tymeJV
tymeJV

Reputation: 104785

Use an instance of this

jQuery(".slidswap_moused_over").mousemove(function(e) {

     var offset = jQuery(this).offset();
     var relativeX = (e.pageX - offset.left);
     var relativeY = (e.pageY - offset.top);
     jQuery(".slidswap_left_image", this).css({ "width": relativeX });
     jQuery('.slidswap_drag_message', this).css({ "opacity": 0 });
});

As seen: http://jsfiddle.net/5DjPw/6/

Upvotes: 6

Related Questions