防止在兄弟姐妹上空盘旋

Question

我有这个DOM：

<div class="container">
  <img src="" />
  <div class="nav">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

现在我创建这个jquery函数：

$('img').mouseover(function(){ 
  $('img').css('width', 'auto');
}

但如果我将鼠标悬停在div导航上，它就会停止工作。我该如何防止这种行为？谢谢。

Answer 1

出现这种情况是因为只要你悬停div鼠标就不会再悬停在img上。

因此，不是将.mouseover函数绑定到图像，而是将其绑定到div。然后使用jQuery的.find()函数找到图像。

$('.container').mouseover(function(){ 
    $(this).find('img').css('width', 'auto');
}

Answer 2

你可以给div的风格：pointer-events: none