/    Sign up×
Community /Pin to ProfileBookmark

[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 [B]$(this=’.text_maptooltip’)[/B] such like this, because it can animate [B]current[/B] 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 [B]current[/B](one) selector that contains class [B].text_maptooltip[/B]. 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
[B][U]$(this)[/U][/B].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);
});[/CODE]

Example problem highlighted in CODE.

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@haulinFeb 04.2013 — 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)[B].filter('.text_maptooltip')[/B].stop().animate({ color: '#ffffff' },500);[U][/U]
Copy linkTweet thisAlerts:
@haulinFeb 05.2013 — 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()
×

Success!

Help @xbatista spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...