我的代码在页面上出现了数百次:
<div class="container">
<div class="containerbutton"></div>
<div class="containercontent">content</div>
</div>
<div class="container">
<div class="containerbutton"></div>
<div class="containercontent">content</div>
</div>
<div class="container">
<div class="containerbutton"></div>
<div class="containercontent">content</div>
</div>
我正在努力实现这一点:每当“containerbutton”悬停时,我希望它下面的“containercontent”div显示并应用“displayclass”类。但是现在,只要我将鼠标悬停在“containerbutton”div上,所有“containercontent”div就会显示在页面上。如何仅定位当前悬停的按钮?
以下是我目前正在使用的脚本:
<script>
jQuery(document).ready(function() {
$(".container .containerbutton").hover(function () {
$(".containercontent").addClass('displayclass');
}, function(){
$(".containercontent").removeClass('displayclass');
});
});
</script>
答案 0 :(得分:2)
您必须使用this
引用来获取当前悬停元素
jQuery(document).ready(function() {
$(".container .containerbutton").hover(function () {
$(this).next().addClass('displayclass');
}, function(){
$(this).next().removeClass('displayclass');
});
});
&#13;
.displayclass{
display : none;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="containerbutton">1</div>
<div class="containercontent">content</div>
</div>
<div class="container">
<div class="containerbutton">2</div>
<div class="containercontent">content</div>
</div>
<div class="container">
<div class="containerbutton">3</div>
<div class="containercontent">content</div>
</div>
&#13;