javascript - jQuery 使用 $(this) 并将鼠标悬停在一起

Question

链接到 fiddle

我正在尝试使用 $(this) 关键字和 jquery 的 hover() 函数。

有 3 个 div 类为“item”，每个 div 包含两个子 div，“trigger”和“trigger-box”，我想要实现的是当用户悬停在每个“trigger”div 上时，“visible”类需要添加到它各自的“触发框”。

HTML代码:

<div class="container">
  <div class="item">
    <div class="tirgger">
      <h5>Trigger 1</h5>
    </div>
    <div class="trigger-box">
      <h3>trigger box 1</h3>
    </div>
  </div>
   <div class="item">
    <div class="tirgger">
      <h5>Trigger 2</h5>
    </div>
    <div class="trigger-box">
      <h3>trigger box 2</h3>
    </div>
  </div>
   <div class="item">
    <div class="tirgger">
      <h5>Trigger 3</h5>
    </div>
    <div class="trigger-box">
      <h3>trigger box 3</h3>
    </div>
  </div>

JavaScript 代码:

$('.item').hover(function() {

    console.log("hover in");
    $('.item .trigger-box', this).addClass('visible');

  }, function() {

    console.log("hover out");
    $('.item .trigger-box', this).removeClass('visible');;
});

我已经尝试使用多个组合 '$(this)' 关键字但无法让它工作，任何帮助将不胜感激。

Answer 1

去掉

的 .item部分

$('.item .trigger-box', this);

该语法与

完全相同

$(this).find('.item .trigger-box')

但由于 this 是 .item 它不会找到那个选择器。它正在内部寻找自己

Working version