隐藏每个项目的内容

Question

如何在 mouseenter 上隐藏每个 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

将您的代码替换为：

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

这将在特定 .view div 悬停时隐藏 .quickview div 并在移除悬停时再次显示它。

Answer 2

不需要 Each 中的 Each。

$('.view') 将 select 所有具有 class 视图的元素，并使用 .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>

隐藏每个项目的内容

Hide Content on each item

javascript

each

foreach

jquery

jquery-events