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

Answer 2

您可以尝试以下方法：

$('.tirgger').hover(function() {

    $(this).parent().find('.trigger-box').addClass('visible');

  }, function() {

    $(this).parent().find('.trigger-box').removeClass('visible');;
});

.visible {
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 3

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

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

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

3 个答案: