jquery - 防止悬停在 sibling 上

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 函数绑定(bind)到图像，而是将它绑定(bind)到 div。 然后使用 jQuery 的 .find() 函数查找图像。

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