各項目の内容を非表示にする

Question

こんにちはどうすればマウスの各DIVからコンテンツを隠すことができますか？

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>

事前

Answer 1

それぞれがそれぞれ必要ではありません。

$('.view')は、クラスビューのすべての要素を選択し、.onを使用すると、定義したイベントがそれぞれの要素に追加されます。ちょうどあなたのコードはすでにこれをやっているように見える$(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

の多くのおかげでこれであなたのコードを置き換えます

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

これは、特定の.view divからホバー上.quickview divを隠し、再びオンにホバーショーにそれを削除します。