MR. A MR. A -4 years ago 94
Javascript Question

Hide Content on each item

Hello how could I hide Content from each DIV on mouseenter?



var quick = document.querySelectorAll(".quickview");
var quickwrap = document.querySelectorAll(".view");


quickwrap.forEach(div => div.addEventListener("mouseenter", function(){
$.each(quick, function(){
$(this).hide()
})
})
);

div{
padding: 15px;
text-align: center;
background: rgba(50, 190, 100, 0.7);
transition: 0.2s ease-in-out;
opacity: 1;
bottom: 50px;
color: white;
}
.view{
width:300px;
height:100px;
position:relative;
top:100px;
left:20px;
margin:1em;
float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view">
<div class="quickview">
<span class="viewtxt"> Quick View</span>
</div>
</div>
<div class="view">
<div class="quickview">
<span class="viewtxt"> Quick View</span>
</div>
</div>
<div class="view">
<div class="quickview">
<span class="viewtxt"> Quick View</span>
</div>
</div>
<div class="view">
<div class="quickview">
<span class="viewtxt"> Quick View</span>
</div>
</div>





Many Thanks in advance

Answer Source

Replace your code with this :

$(function(){
    $('.view').hover(
      function() {
        // on hover
        $(this).find('.quickview').hide();
      }, function() {
        // on remove hover
        $(this).find('.quickview').show();
      }
    );  
});

This will hide .quickview div on hover from specific .view div and on remove hover show it again.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download