Masquer le contenu de chaque élément

Question

Bonjour comment est-ce que je pourrais cacher le contenu de chaque DIV sur 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>

Merci beaucoup à l'avance

Answer 1

Chaque intérieur n'est pas nécessaire.

$('.view') sélectionnera tous les éléments avec la vue de classe et utilisera .on pour ajouter l'événement que vous avez défini à chacun de ces éléments.

Pour masquer le contenu de l'élément mouseenter actuel il suffit d'utiliser $(this).find('.quickview').hide();

$('.view').on('mouseenter', function(){ 
 
    $(this).find('.quickview').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>

Answer 2

Remplacez votre code avec ceci:

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

Cela permet de masquer .quickview div sur le vol stationnaire de spécifique .view div et supprimer montrent vol stationnaire à nouveau .