www.webdeveloper.com
Results 1 to 3 of 3

Thread: [JQUERY] Select multiple class selectors in mouseenter event

  1. #1
    Join Date
    Dec 2011
    Posts
    20

    Smile [JQUERY] Select multiple class selectors in mouseenter event

    Hi, I have a big problem, I want to select in mouse event handler current attached to it selector, but I need to (i don't know search or equal somehow) get $(this='.text_maptooltip') such like this, because it can animate current selector/element class.
    If I use $(this) it animates only, when I hover over the text, if I use $(map_placename_string) it animates all 3 elements that are created.

    So I need to animate only current(one) selector that contains class .text_maptooltip. Any ideas?
    Code:
    $(document).ready(function() {
    	var map_placename_string = ".text_maptooltip";
    	var map_placeimg_string = ".img_maptooltip, .text_maptooltip";
    	var fd_out_color = '#ff8c00';
    
    	$(document).on(
    	{
    		mouseenter: function ()
    		{
            // Correct, but obviously need to equal to .text_maptooltip. $(this) needed obviously
    			$(this).stop().animate({ color: '#ffffff' },500);
    		},
    		mouseleave: function ()
    		{
           // $(map_placename_string) for example this leaves on ALL elements that contains this class
    			$(map_placename_string).stop();
    			$(map_placename_string).animate({ color: fd_out_color },500);
    		}
    	}, map_placeimg_string);
    });
    Example problem highlighted in CODE.
    Last edited by xbatista; 02-02-2013 at 04:42 PM.

  2. #2
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    I am not sure about the description of the problem, but have a look at the .filter() method.

    I think you want to do $(this).filter('.text_maptooltip').stop().animate({ color: '#ffffff' },500);

  3. #3
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    Also, closer look at your code reveals to me, that you register the events to the whole document. That isn't always the best thing to do, because it could fire many times per second as the user hovers over various elements. I don't know your markup, but you could use

    $( '.text_maptooltip' ).mouseenter( function(){} ).mouseleave( function(){} );

    or

    $( document ).on( 'mouseenter', '.text_maptooltip', function(){} ); //but try something more specific, than document
    $( document ).on( 'mouseleave', '.text_maptooltip', function(){} );

    see .on()

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles