javascript - 悬停一个 div 但不是它的链接

Question

我有这个简单的功能，当鼠标悬停在另一个 div .contacts 上时会显示一个隐藏的 div .dida

    $(document).on("mouseenter", ".contacts", function() {
      $(".dida").addClass("block")
    })
    
    $(document).on("mouseleave", ".contacts", function() {
      $(".dida").removeClass("block")
    })

.dida{opacity:0}
.block{opacity:1}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contacts">A B C D E F G H I J K <a href="#">LINK</a> M N O P Q R S T U V W X Y Z</div>
<div class="dida">VOILA</div>

如果我将鼠标悬停在 .contacts div 中的 a 上，如何避免显示隐藏的 div？

Answer 1

在链接上添加一个事件处理程序，并对链接和 div 使用鼠标悬停。

$(document).on("mouseover", ".contacts", function() {
  $(".dida").addClass("block")
})
$(document).on("mouseleave", ".contacts", function() {
  $(".dida").removeClass("block")
})
$('div.contacts > a').mouseover(function(e) {
  $(".dida").removeClass("block")
  e.stopPropagation();
})

.dida {
  opacity: 0
}
.block {
  opacity: 1
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contacts">A B C D E F G H I J K <a href="#">LINK</a> M N O P Q R S T U V W X Y Z</div>
<div class="dida">VOILA</div>