javascript - 在悬停时使用 Jquery / Javascript 显示另一个 div

Question

我有一个部分，在将鼠标悬停在父 div 上时，我想显示一个子 div (element)，所以这里是

JSFIDDLE：现场演示

这是HTML

<div class="flex-container">
  <div class="box">1
        <span class="box-children">Children Div</span>
  </div>
  <div class="box">2
          <span class="box-children">Children Div</span>
  </div>
  
  <div class="box">3
          <span class="box-children">Children Div</span>

  </div>
  <div class="box">4
          <span class="box-children">Children Div</span>

  </div>
  <div class="box">5
          <span class="box-children">Children Div</span>

  </div>
  <div class="box">6
          <span class="box-children">Children Div</span>

  </div>
</div>

这里是 JS

$(document).ready(function() {    
    console.log('init') 
    $('.box').hover(function(){     
        $('.box-children').addClass('open');    
    },     
    function(){    
        $('.box-children').removeClass('open');     
    });
});   

预期的：

在悬停父元素上，它应该显示子元素

不幸的是，现在悬停时，它显示所有子元素

标签： javascripthtmljquerycss

Answer 1

您可以this在回调中使用来引用触发元素（在本例中为父元素）：

$(document).ready(function() {    
    console.log('init') 
    $('.box').hover(function(){     
        $(this).find('.box-children').addClass('open');    
    },     
    function(){    
        $(this).find('.box-children').removeClass('open');     
    });
}); 

.box-children {
  display: none;
}

.box-children.open {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-container">
  <div class="box">1
        <span class="box-children">Children Div</span>
  </div>
  <div class="box">2
          <span class="box-children">Children Div</span>
  </div>
  
  <div class="box">3
          <span class="box-children">Children Div</span>

  </div>
  <div class="box">4
          <span class="box-children">Children Div</span>

  </div>
  <div class="box">5
          <span class="box-children">Children Div</span>

  </div>
  <div class="box">6
          <span class="box-children">Children Div</span>

  </div>
</div>