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

link：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');这只是为了提高性能。

运行此代码段：

＆＃13;

$('.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')
});

＆＃13;

<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>

＆＃13;

请参阅？现在正在执行mouseenter和mouseout功能。

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

1 个答案: