How can i execute the action only on the div,when i have multiple div with same class
http://jsfiddle.net/kent93/Qw7bw/
when the mouse enter one div , the other div also will have action , how can i solve this
i want only the div that my mouse goes in take action , not the other, what best solution?
Use
$(this).children(".fromTopToBottom")
instead of$(".fromTopToBottom")
.This will select divs of the given class inside the element whose handler you are writing.
What you need is a "current" div concept.
At the beginning of mouseenter handler:
$(".trbl").removeClass("current"); $(this).addClass("current");
In your case statement,
$(".fromTopToBottom").css({...})
->$(".current .fromTopToBottom").css({...})
For the effect check out http://jsfiddle.net/Qw7bw/7/
very simple, use $(this), for example
If divs are nested then you should use e.stopPropagation() to stop the event bubling.
Change the selector of each position to:
$(this).children(".class")
for example the code
$(".fromTopToBottom")
will change to$(this).children(".fromTopToBottom")
Demo: http://jsfiddle.net/Qw7bw/10/
Use $(this).find(x) rather than $(x) directly when selecting ".fromTopToBottom" and similar classes. This allows jQuery to only select childs of the hovered element http://jsfiddle.net/Qw7bw/6/