Jquery - Events of mouse vs Z-Index

Question

Jquery - Events of mouse vs Z-Index

Navigation

#1 by (2 votes)

2

I have the following problem: I created a div and inside it there is a second div with a text.

<div class="red">
    <div class="blue">OK</div>
</div>

The parent div has received an event to display message when the mouse over or out.

$(document).ready(function(){
    $('.red').mouseover(function(){
        alert('in');                                      
    }).mouseleave(function(){
        alert('out');
    });
});

However the div-child has received an absolute positioning, chained to the relative positioning of the parent div, simplifying, the child div will position itself just above the parent div

.red {width:200px;height:200px;background:red;position:relative}
.blue {width:100px;
    height:100px;
    background:blue;
    color:white;
    position:absolute;
    z-index:1;
}

link

The problem is, if I hover the mouse or get off of one of the divs, the event will run normally, but when I step from div-parent to div-child and vice versa, events are fired .

I need Jquery to group the div-parent and div-child even if they are in absolute position, as long as both are a single element.

(obs .: It is crucial to maintain absolute positioning)

jquery css

asked by anonymous 08.11.2015 / 23:27

1 answer

How to check the size of a javascript object (in memory) Is it possible to synchronize a mysql server with a local Firebird bank?

score 2 · Accepted Answer

You need to use mouseenter instead of mouseover :

$(document).ready(function(){
    $('.red').mouseenter(function(){
        alert('in');                                      
    }).mouseleave(function(){
        alert('out');
    });
});

mouseenter par with mouseleave (and behaves as you want), while mouseover par with mouseout .

link