only - Javascript Mouseover de los niños

toggle div javascript show hide

Question

Tengo la siguiente configuración html:

<div id="div1">
<div id="content1">blaat</div>
<div id="content1">blaat2</div>
</div>

está diseñado para que NO pueda desplazarse div1 sin colocar uno de los otros 2 divs. Ahora tengo un mouseout en div1.
El problema es que mi div1.mouseout se activa cuando paso de content1 a content2, porque sus mouseouts están burbujeando.
y las propiedades target, currentTarget o relatedTarget del evento nunca son div1, ya que nunca se cierne directamente ...
He estado buscando locura por esto, pero solo puedo encontrar artículos y soluciones para problemas que son lo contrario de lo que necesito. Parece trivial pero no puedo hacer que funcione ...
El mouseout de div1 SÓLO debe activarse cuando el mouse abandone div1.

Una de las posibilidades sería establecer algunos datos en el mouse enter y mouseleave, pero estoy convencido de que esto debería funcionar de la caja, ya que es solo un mouseout ...

EDITAR:

bar.mouseleave(function(e) {
                if ($(e.currentTarget).attr(''id'') == bar.attr(''id'')) {
                    bar.css(''top'', ''-''+contentOuterHeight+''px'');
                    $(''#floatable-bar #floatable-bar-tabs span'').removeClass(''active'');
                }
            });

cambió el mouseout para mouseleave y el código funcionó ...

Answer 1

El método de hover estacionario tiene dos parámetros, primero para el mouse y luego para el mouse.

$(''your_div'').hover(function(){
  // your code here.
}, function(){// any mouse out code here})

Answer 2

Utilice el evento mouseleave lugar o mouseout para esto, maneja su problema específico. Mira aquí para más detalles

De los documentos sobre la diferencia:

El evento mouseleave difiere del mouseout en la forma en que maneja el evento de burbujeo. Si se utilizó mouseout en este ejemplo, cuando el puntero del mouse se movió fuera del elemento interno, el controlador se activaría. Esto generalmente es un comportamiento indeseable. El evento mouseleave, por otro lado, solo activa su controlador cuando el mouse deja el elemento al que está vinculado, no un descendiente. Por lo tanto, en este ejemplo, el controlador se activa cuando el mouse deja el elemento externo, pero no el elemento interno.

Ejemplo de marcado:

<div id="outer">
  Outer
  <div id="inner">
    Inner
  </div>
</div>