неожиданное поведение события jquery изнутри содержит div

Question

Я вижу неожиданное поведение на небольшом HTML-виджетах, недавно созданных. Три последовательно встроенных divs каждый имеет маркер и меню, которые появляются при входе в div и скрываются при выходе. Маркер предназначен для отслеживания положения вертикальной мыши. Проблема здесь в том, что событие mouseover срабатывает только тогда, когда мышь находится над маркером, а не когда мышь над содержащим div.

http://jsfiddle.net/laurencefass/f47a7a2r/

$(".outer, .inner, .middle") 
 
    .mouseenter(function(e) { 
 
     $(this).children(".content:first").show(); 
 
    $(this).parents().children(".content:first").hide(); 
 

 
     $(this).children(".marker:first").show(); 
 
     $(this).parents().children(".marker:first").hide(); 
 
    }) 
 
    .mouseleave(function(e) { 
 
     $(this).children(".content:first").hide(); 
 
     $(this).parents().children(".content:first").show(); 
 

 
     $(this).children(".marker:first").hide(); 
 
     $(this).parents().children(".marker:first").show(); 
 
    }) 
 
    .mouseover(function(e) { 
 
    $(".content", $(this)).html("left = " + e.pageX + " right = " + e.pageY); 
 
    var marker = $(this).children(".marker"); 
 
    marker.offset({top:e.pageY - marker.height()/2, right:0});});

.outer, .middle, .inner { 
 
    font-size:0.8em; 
 
    position:absolute; 
 
    border:5px solid black; 
 
    background-color:lightgray; 
 
    text-align:center; 
 
} 
 

 
.outer { 
 
    top:10%; 
 
    left:10%; 
 
    width:80%; 
 
    height:500%; 
 
} 
 

 
.middle { 
 
    top:5%; 
 
    left:20%; 
 
    width:60%; 
 
    height:60%; 
 
} 
 

 
.inner { 
 
    top:5%; 
 
    left:30%; 
 
    width:40%; 
 
    height:60%; 
 
} 
 

 
.content { 
 
    background-color:aliceblue; 
 
    min-height:2em; 
 
    min-width:50px; 
 
    display:none; 
 
} 
 

 
.marker { 
 
    height:50px; 
 
    width:5em; 
 
    background-color:black; 
 
    position:absolute; 
 
    right:0px; 
 
    margin-right:2px; 
 
    display:none; 
 
    color:white; 
 
    fontsize:0.8em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div class="outer"> 
 
    <div class="content">outer menu</div> 
 
    <div class="marker">widget</div> 
 
    <div class="middle"> 
 
     <div class="content">middle menu</div> 
 
     <div class="marker">widget</div> 
 
     <div class="inner"> 
 
      <div class="content">inner menu</div> 
 
      <div class="marker">widget</div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

Это можно сделать гораздо проще, только с помощью CSS. Вы также можете использовать эту функцию для своих виджетов.

.outer:hover>.content, 
.middle:hover>.content, 
.inner:hover>.content{ 
    display: block; 
} 

Затем вы можете вырезать ваш mouseenter и mouseleave

$(".outer, .inner, .middle") 
    .mouseover(function(e) { 
     var marker = $(this).children(".marker"); 
     marker.offset({top:e.pageY - marker.height()/2, right:0}); 
}); 

JSFiddle

Если вы хотите, чтобы показать виджет элемента парил вы должны использовать JQuery, Кроме того, вы вероятно, будет использовать событие mosemove(), чтобы оно постоянно находилось в позиции мыши.

$(".outer, .inner, .middle").mousemove(function(e) { 
    e.stopPropagation(); 
    var marker = $(this).children(".marker"); 
    marker.eq(0).show(); 
    marker.offset({top:e.pageY - marker.height()/2, right:0}); 
}); 

$(".inner, .middle").mouseenter(function(e) { 
    if($('.marker', $(this).parent()).eq(0).length){ 
     $('.marker', $(this).parent()).eq(0).hide(); 
    } 
}); 

$(".outer, .inner, .middle").mouseleave(function(e) { 
    if($('.marker', $(this).eq(0)).length){ 
     $('.marker', $(this).eq(0)).hide(); 
    } 
}); 

JSFiddle

Answer 2

мое ожидание: а ки «плавающие» виджет для отслеживания вертикального положения мыши и виден только при условии, что курсор находится в пределах объема контейнера маркеров.