悬停在一个元素上，不影响其他具有相同类名的元素

如何解决悬停在一个元素上，不影响其他具有相同类名的元素

嗨，我正在努力解决一些可能看起来很简单（也许很简单）的事情，但我不知道如何仅在有其他具有相同类名的元素时影响我悬停的元素。

>

我显然遗漏了一些东西，但这是我正在使用和失败的内容，因为它将 .insertAfter() 应用于所有名为 .item 的元素，而不仅仅是悬停的那个：

class VerifyOtpSerializer(serializers.Serializer):
    phone_number = serializers.CharField(max_length=225,source='phoneNumber',required=True)
    country_code = serializers.CharField(max_length=225,source='countryCode',required=True)
    otp = serializers.CharField(max_length=255,required=True)

$('.item').hover(
   function() {
      $('<div class="testText">TEST</div>').insertAfter('.block',this);
   },function() {

   }
);

.item {
  display: block;
  margin: 5px;
  padding:5px;
  border: 1px solid #000;
  background: #fff;
  color: black;
  text-align:center;
}

.block {
  display: block;
  margin: 2px;
  background: #000;
  height:20px;
}

我尝试添加一个 .each() 函数，然后在内部使用 $(this)'hover() 但这也不是答案，所以我真的需要这里有一点帮助，仅影响悬停的 .item。

谢谢

解决方法

问题是因为 insertAfter() 不接受第二个参数中的 this 作为上下文选择器，就像 jQuery 对象 ($()) 那样，所以你选择 all .block 并对它们调用 insertAfter()。

要解决此问题，您可以改用 find()：

$('.item').hover(function() {
  $(this).find('.block').after('<div class="testText">TEST</div>');
},function() {
  // I assume you want to remove the content you added here as well...
  $(this).find('.testText').remove();
});

.item {
  display: block;
  margin: 5px;
  padding: 5px;
  border: 1px solid #000;
  background: #fff;
  color: black;
  text-align: center;
}

.block {
  display: block;
  margin: 2px;
  background: #000;
  height: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="block"></div>
</div>
<div class="item">
  <div class="block"></div>
</div>
<div class="item">
  <div class="block"></div>
</div>
<div class="item">
  <div class="block"></div>
</div>
<div class="item">
  <div class="block"></div>
</div>