How can i execute the action only on the div,when i have multiple div with same class

Question

875.01K viewsSeptember 16, 2022css html javascript jquery mouseenter

2

Kent Liau September 12, 2022 0 Comments

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?

5 Answers

score 0 · Answer 1 · 2022-09-14T12:58:36+00:00

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/

score 0 · Answer 2 · 2022-09-14T03:43:49+00:00

Use $(this).children(".fromTopToBottom") instead of $(".fromTopToBottom").

This will select divs of the given class inside the element whose handler you are writing.

score 2 · Answer 3 · 2022-09-13T09:36:25+00:00

very simple, use $(this), for example

$('.mydivclass').mouseover(function(e){
    $(this).css('color','gray'); // Current element
});

If divs are nested then you should use e.stopPropagation() to stop the event bubling.

score 1 · Answer 4 · 2022-09-13T02:11:24+00:00

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/

score 6 · Answer 5 · 2022-09-12T10:20:06+00:00

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/