隐藏每个项目的内容

Question

您好我如何在mouseenter上隐藏每个DIV的内容？

＆＃13;

＆＃13;

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


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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

非常感谢提前

Answer 1

用以下代码替换您的代码：

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

这会隐藏.quickview div从特定.view div悬停，并在删除悬停时再显示它。

Answer 2

每个内部都不需要。

$('.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>