我是 Js 和 jQuery 的新手，当我将鼠标悬停在另一个 div 上时，我设法在一个 div 上设置了一个宽度变化动画。但是，当我将 3 组相似的 div 放在其中时，将鼠标悬停在其中一组上会触发所有其他 div 的 Action 。我试图添加一些“this”和“next()”，但它完全停止工作了。你能赐教吗？谢谢
这是代码。
https://jsfiddle.net/HiD3f/LmbaL1qo/2/
<html>
<div class="mapHideBtn collapsed"></div>
<div class="searchBlock hidden"></div>
<div class="mapHideBtn collapsed"></div>
<div class="searchBlock hidden"></div>
<div class="mapHideBtn collapsed"></div>
<div class="searchBlock hidden"></div>
</html>
<style>
.searchBlock {
display : inline-block;
height: 50px;
background : red;
}
.hidden {
width: 0;
transition : width 0.4s ease-in
}
.shown {
width: 300px;
transition : width 0.4s ease-in
}
.mapHideBtn {
display : inline-block;
width: 50px;
height: 50px;
background : green;
}
</style>
<script>
$('.mapHideBtn').hover(function(){
if ($(this).hasClass("collapsed")) {
$('.searchBlock').removeClass("hidden").addClass("shown");
$('.mapHideBtn').removeClass("collapsed").addClass("expanded");
}
else {
$('.searchBlock').removeClass("shown").addClass("hidden");
$('.mapHideBtn').removeClass("expanded").addClass("collapsed");
};
});
最佳答案
您可以使用$(this).next() 和toggleClass() DEMO
$('.mapHideBtn').hover(function(){
$(this).next().toggleClass('shown');
});
更新:如果您希望红色条在您将鼠标悬停在其上时保持打开状态，您可以使用这种纯 CSS 方法 DEMO或者将 .searchBlock 放在 .mapHideBtn 中 DEMO
关于javascript - jQuery 悬停动画仅在类似元素中的一个元素上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37163724/