Mouse events on any underlying div (without selecting class/id)

Question

I have one transparent div with id=1, and I need to pass mouse events to all underlying divs (regardless of class / id) while keeping this transparent div reactive to it's own mouse events.

So selecting underlaying divs by class/id, and pointer-events: none / display: none are not the options.

$('#1').mouseenter(function() {
    $(this).css('background','rgba(0, 120, 255, 0.3)');
});
$('#a').mouseenter(function() {
   $(this).css('background', 'red');
});
$('#1').mouseleave(function() {
    $(this).css('background','rgba(0, 120, 255, 0.2)');
});
$('#a').mouseleave(function() {
   $(this).css('background', '#555555');
});

http://jsfiddle.net/B6SAy/

How can this be achieved in a class/id independent way?

If it means anything, I have only 1 underlying div at the same time, but that div can have any class / id.

score -3 · Answer 1 · edited May 23 '17 at 12:10

-3

Instead of mouseenter() and mouseleave(), you could try mouseover(), mouseout(), and/or hover(). These links may help:

StackOverflow: Jquery mouseenter() vs mouseover()

Ben Nadel: jQuery Events: MouseOver / MouseOut vs. MouseEnter / MouseLeave

You can also check out the documentation for each function at api.jquery.com.

edited May 23 '17 at 12:10

Community

1
1

answered Feb 24 '14 at 17:37

jkdev

11,360
15
54
77

how does help for lower level div ? – Prabindh Feb 24 '14 at 17:58
You could improve your answer by explaining better adding the links to the functions' documentations. – mathielo Feb 24 '14 at 17:58
OK, I added the links. – jkdev Feb 24 '14 at 18:27

Mouse events on any underlying div (without selecting class/id)

1 Answers1