隱藏每個條目上的內容

Question

你好我怎麼能隱藏每個DIV上的內容在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>

提前

Answer 1

每個裏面一個是不需要的。

$('.view')將選擇所有具有類視圖的元素，並使用.on將您定義的事件添加到每個元素。

要隱藏當前mouseenter元素的內容只是用$(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(); 
     } 
    ); 
}); 

這將隱藏在懸停.quickview div從具體.view div和刪除懸停表演一遍。