I have this simple function that shows a hidden div .dida
when hovering another div .contacts
$(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>
How can I avoid to show that hidden div if I'm hovering an a
inside the .contacts
div?
Add an event handler on the link and use mouseover for both the link and the 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>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments