代码之家 › 专栏 › 技术社区 › chandan

jquery使用$(this)并一起悬停

css html jquery javascript

chandan · 技术社区 · 6 年前

链接到 fiddle

我试图使用$(this)关键字&jquery的hover()函数。

类“item”有3个div,每个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>

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 回复 | 直到 6 年前

charlietfl 6 年前

摆脱 .item 部分

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

这个语法和

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

但是自从 this 是这个 .项目 它找不到那个选择器它在寻找自己里面它本身

Working version

Temani Afif 6 年前

你可以试试这个:

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

spiker 6 年前

对于更简单的解决方案,请使用

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

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前