Javascript 使用$（this）并将鼠标悬停在一起的jQuery

链接到

我试图使用$（this）关键字&jquery的hover（）函数

有3个div类为'item'，每个div包含两个子div'trigger'和'trigger box'，我试图实现的是，当用户悬停在每个'trigger'div上时，需要将'visible'类添加到其各自的'trigger box'

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>

我尝试了多种组合“$（this）”关键字，但无法使其工作，如有任何帮助，将不胜感激

您可以尝试以下方法：

$（'.tirgger'）。悬停（函数（）{
$（this.parent（）.find（'.trigger box'）.addClass（'visible'）；
}，函数（）{
$（this.parent（）.find（'.trigger box'）.removeClass（'visible'）；；
});
。可见{
颜色：红色；
}

触发1
触发框1
触发2
触发框2
触发3
触发框3
去掉
.item
部分

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

该语法与

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

但是由于
此
是
项，因此它将找不到该选择器。它在寻找自己的内在

要获得更简单的解决方案，请使用

$(document).ready(function(){
    $('.item').hover(function(){
    $(this).find('.trigger-box').css("opacity","1")
},function(){
    $(this).find('.trigger-box').css("opacity","0");
});
});

您是特别需要添加类，还是只需要根据悬停在
.tirgger
元素（可以通过CSS实现）上的
.trigger box
元素设置样式？我只需要根据“.trigger”的悬停状态影响“trigger box”元素的样式设置。我想知道这可以用CSS来完成，因为他们都是兄弟姐妹而不是父母和孩子。实际上，tirgger:hover+。触发器框{/*这里的样式*/}
-或者charlietfl的方法-应该适用于CSS方法。
$(document).ready(function(){
    $('.item').hover(function(){
    $(this).find('.trigger-box').css("opacity","1")
},function(){
    $(this).find('.trigger-box').css("opacity","0");
});
});