javascript - Mouseover() event for multiple divs from a class in jQuery -

javascript - Mouseover() event for multiple divs from a class in jQuery -

i have 3 divs in 1 line, aligned css prop "display: table-cell":

<div id="divmaster" width="1000" height="1000"> <div id="divmenu1" class="divmenu"> opción 1 </div> <div id="divmenu2" class="divmenu"> opción 2 </div> <div id="divmenu3" class="divmenu"> opción 3 </div> </div>

then have problem trying animate 1 single div when mouse passing over. i'm trying this:

$(".divmenu").mouseover(function() { target = "#" + $(this).attr("id"); $(target).stop(true, false); $(target).animate({opacity: '+=' + (parsefloat(ofin) - parsefloat($(target).css("opacity"))) + '', height: '+=' + (parsefloat(hfin) - parsefloat($(target).css("height"))) + ''}, {duration: 1000, easing: "easeoutcirc"}); }); $(".divmenu").mouseleave(function() { target = "#" + $(this).attr("id"); $(target).stop(true, false); $(target).animate({opacity: '-=' + (parsefloat($(target).css("opacity")) - parsefloat(oini)) + '', height: '-=' + (parsefloat($(target).css("height")) - parsefloat(hini)) + ''}, {duration: 1000, easing: "easeoutcirc"}); });

what happens code every div class animation. said before: i'm trying animate single div when mouse enters in element class.

what tried:

using "startswith" identifier instead of using ".divmenu". using delegate instead of mouseover , mouseleave events.

note: "ofin", "hfin", etc. constants.

working demo

$(".divmenu").mouseover(function() { $( ).animate({ fontsize: "50", }, 1000, function() { // animation complete. }); });

javascript jquery html css