链接到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)'关键字,但无法正常工作,我们将不胜感激。
答案 0 :(得分:4)
摆脱
的.item
部分
$('.item .trigger-box', this);
该语法与
完全相同$(this).find('.item .trigger-box')
但是由于this
是.item
,所以它将找不到该选择器。它正在内部寻找
答案 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");
});
});