如何在jQuery的mousedown事件监听器中混合悬停事件监听器？

Question

htmlCODE：

<div class="original_circle" style="border-radius: 50%; background-color: blue; width: 40px; height:40px; z-index: 0">
    <div class="another_circle" style="position:absolute; border-radius: 50%; background-color: coral; width: 40px; height:40px; z-index: -2"></div>
</div>

 $('.original_circle').mousedown(function() { $(this).find('div.another_circle').css('left', '50%'); $('.another_circle').hover(function() { console.log('hover mouse in') }, function() { console.log('hover mouse out') }); }); $(document).mouseup(function() { console.log('mouse up') }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div class="original_circle" style="border-radius: 50%; background-color: blue; width: 40px; height:40px; z-index: 0"> <div class="another_circle" style="position:absolute; border-radius: 50%; background-color: coral; width: 40px; height:40px; z-index: -2"></div> </div> 

该代码带有圆圈。 当我将鼠标放在类.original_circle ，另一个圆（它的类是another_circle ）已经从其他空间出现。 在按住鼠标的同时，如果鼠标悬停在another_circle ，

$('.another_circle').hover(function(){
    console.log('hover mouse in')
    }, function(){
    console.log('hover mouse out')
});

这些代码必须运行。

但是效果不佳。

我该如何运作？

编辑：添加codepen

链接： https : //codepen.io/anon/pen/gvYvWg

在codepen上方，我想将another_circle的颜色更改为红色或橙色。

Answer 1

问题是another_circle的z位置，即div在original_circle后面，特别是在它的-2后面。

您可以将z-index属性更改为更高的值，例如z-index = 999 。

此外，JQuery最佳实践指出，每个选择器执行都必须存储在一个变量中，即： var $anotherCircle = $(this).find('div.another_circle'); 这只是为了表现。

运行以下代码片段：

 $('.original_circle').mousedown(function() { var $anotherCircle = $(this).find('div.another_circle'); $anotherCircle.css({ 'left': '50%', 'z-index': 999 }).hover(function() { console.log('hover mouse in') }, function() { console.log('hover mouse out') }); }); $(document).mouseup(function() { console.log('mouse up') }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div class="original_circle" style="border-radius: 50%; background-color: blue; width: 40px; height:40px; z-index: 0"> <div class="another_circle" style="position:absolute; border-radius: 50%; background-color: coral; width: 40px; height:40px; z-index: -2"> </div> </div> 

看到？ 现在正在执行mouseenter和mouseout函数。