将鼠标悬停在一个元素上并且不影响具有相同 class 名称的其他元素

Question

嗨，我正在努力解决一些看似简单（也许是）的事情，但我无法弄清楚当其他元素具有相同的元素时如何只影响我悬停的元素class 名字.

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

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

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

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

谢谢

Answer 1

问题是因为 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>

将鼠标悬停在一个元素上并且不影响具有相同 class 名称的其他元素

hover on an element and not affect others with same class name

jquery

this

mouseover

hover