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

时间:2018-07-21 22:59:17

标签: javascript jquery html css

链接到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)'关键字,但无法正常工作,我们将不胜感激。

3 个答案:

答案 0 :(得分:4)

摆脱

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

该语法与

完全相同
$(this).find('.item .trigger-box')

但是由于this .item,所以它将找不到该选择器。它正在内部寻找

Working version

答案 1 :(得分:1)

您可以尝试以下方法:

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

答案 2 :(得分:0)

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

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