Question

我有这个简单的功能，当悬停另一个div .dida

时显示隐藏的div .contacts

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果我在a div中徘徊.contacts，我该如何避免显示隐藏的div？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

在本机JavaScript中，您可以使用事件传播，例如。

addEventListener("event",  function(),  true/false);

hover是一个事件，function是一个action，false告诉DOM执行冒泡事件。必须这样：

document.getElementById('div').addEventListener("hover", function(), false);

document.getElementById('p').addEventListener("hover", function(), false);

在哪里＆＃39; p＆＃39;是在＆＃39;内部。您可以在Jquery中检查类似的代码。 Check this out

悬停div而不是链接

2 个答案: