Beim Überfahren des untergeordneten Elements denkt das übergeordnete Element, dass ich mouseleave() mache

Question

Dies ist jedoch eindeutig nicht der Fall.

Mein JS:

$(".job_charge.item-block").live({ 
    mouseenter: function(){ 
    $(this).find('.edit-and-delete').stop(true,true).fadeIn(); 
    }, 
    mouseleave: function(){ 
    $(this).find('.edit-and-delete').stop(true, true).fadeOut(); 
    } 
}); 

mein HTML:

<div id="job_charge_2244" class="item-block job_charge"> 
      <div class="edit-and-delete right"> 
      </div> 
</div> 

Die CSS:

.item-block.job_charge 
    border-bottom: 1px dotted #ccc 
    display: inline-block 
    padding-bottom: 15px 
    width: 650px 

    .edit-and-delete 
    position: relative 
    display: none 
    top: 25px 
    right: 5px 
    float: right 
    a 
     margin-right: 8px 

ich weg Bananen haben. Wenn ich die Maus über die Links in meinem inneren div, dann sofort, es löst eine Maus-verlassen-Funktion und sie verstecken. Dieses Div ist natürlich in position: relative, aber ich habe es auch in block platziert und es hat immer noch das gleiche Problem.

Das übergeordnete div ist in inline-block.

Answer 1

testen Es ist möglich, dass untergeordnete Element float eingestellt ist und Eltern ist tatsächlich kleiner als man erwarten würde. Versuchen Sie entweder float zu entfernen oder overflow: auto auf übergeordnete Elemente zu setzen ...

Answer 2

versuchen Sie dies statt .. es ist im Grunde das gleiche, aber mit der Verwendung von .hover, das ist die kombinierte Funktion von mousenter und mouseleave .. Auch hat es nicht den Fehler mit dem Verlassen der Eltern beim Betreten des Kindes.

$(".job_charge.item-block").hover(function(){ 
    $(this).children(".edit-and-delete").fadeIn(); 
}, function(){ 
    $(this).children(".edit-and-delete").fadeOut(); 
}); 

http://jsfiddle.net/YWRRZ/4/ < - Meine Geige Link, wo Sie es

Answer 3

Die Ereignisse mouseenter und mouseleave wurden speziell entwickelt, um diese Situation korrekt zu behandeln. Wenn Sie ein untergeordnetes Element eingeben, wird für das übergeordnete Element kein mouseleave-Ereignis ausgelöst, vorausgesetzt, das untergeordnete Element befindet sich tatsächlich innerhalb des übergeordneten Elements.

Wenn ich Ihren Code versuchen, es nicht löst das mouseleave Ereignis, wenn ich das Kind Element schweben:

http://jsfiddle.net/baCsd/

Ich denke, dass Sie etwas in Ihrem Code haben, der das untergeordnete Element tatsächlich platziert außerhalb das übergeordnete Element, und deshalb wird das Ereignis mouseleave ausgelöst.

Wenn zum Beispiel kein Inhalt im übergeordneten Element vorhanden ist, gibt nur die Auffüllung die Höhe, also ist es nur 15px hoch, und die position: relative; top: 25px; könnte das untergeordnete Element unter der Unterseite des übergeordneten Elements platzieren.