[JQUERY] Select multiple class selectors in mouseenter event

[xbatista]

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?

$(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.

[haulin]

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);

[haulin]

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()