html - jQuery 仅选择悬停元素，具有相同的类

Question

我正在创建简单的 jQuery 元素，但我遇到了麻烦，我不知道如何解决这个问题。我创建了三个框，然后将鼠标悬停在这些框周围，我希望显示框文本，是的，它正在工作，但我只想显示悬停的框文本(mousseentered)，现在它会显示所有框文本，例如，如果我将鼠标悬停在第一个框上，我只想显示第一个框文本，所有框都有相同的类名，这是必需的

$('.three_box_inner').mouseenter(function(){
  $('.text').css({
    'display':'block',
  })

})

.three_box{
display:flex;

}

.three_box_inner{
  height:200px;
  width:200px;
  background-color:red;
  margin-left:20px;
}
.text {
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class='three_box'>
  <div class='three_box_inner'>
    <div class='text'>
      text
    </div>
    </div>
      <div class='three_box_inner'>
        <div class='text'>
      text
    </div>
    </div>
      <div class='three_box_inner'>
        <div class='text'>
      text
    </div>
    </div>
  <div>

Answer 1

完全不需要JS。您所需要的只是 CSS 和 :hover伪选择器。

.three_box_inner:hover .text {
  display: block;
}

示例:

.three_box {
  display: flex;
}

.three_box_inner {
  height: 200px;
  width: 200px;
  background-color: red;
  margin-left: 20px;
}

.text {
  background: gold;
  opacity: 0;
  transition: 0.3s;
}

.three_box_inner:hover .text {
  opacity: 1;
}

<div class='three_box'>
  <div class='three_box_inner'>
    <div class='text'>
      text
    </div>
  </div>
  <div class='three_box_inner'>
    <div class='text'>
      text
    </div>
  </div>
  <div class='three_box_inner'>
    <div class='text'>
      text
    </div>
  </div>
</div>

如果你确实想保留可见状态:
请注意 CSS 几乎保持不变，只是代替了 :hover您可以使用 .is-hover并使用 jQuery 的 .removeClass() 更改父元素上的这些类和.addClass()

const $box = $(".three_box_inner");

$box.on("mouseenter", function() {
  $box.not(this).removeClass("is-hover");
  $(this).addClass("is-hover");
});

.three_box {
  display: flex;
}

.three_box_inner {
  height: 200px;
  width: 200px;
  background-color: red;
  margin-left: 20px;
}

.text {
  background: gold;
  opacity: 0;
  transition: 0.3s;
}

.three_box_inner.is-hover .text {
  opacity: 1;
}

<div class='three_box'>
  <div class='three_box_inner'>
    <div class='text'>
      text
    </div>
  </div>
  <div class='three_box_inner'>
    <div class='text'>
      text
    </div>
  </div>
  <div class='three_box_inner'>
    <div class='text'>
      text
    </div>
  </div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>