Javascript jQuery仅在其他类似元素中的一个元素上悬停动画

我不熟悉Js和jQuery，当我在另一个div上悬停时，我设法在div上设置了一个宽度更改动画。但当我放置3组类似的div时，其中一组上的鼠标悬停会触发其他所有div的动作。我试着放一些“this”和“next（）”，但它完全停止了工作。你能给我点化一下吗。多谢各位

这是代码

.搜索块{
显示：内联块；
高度：50px；
背景：红色；
}
.隐藏{
宽度：0；
过渡：宽度为0.4s，易于调整
}
.显示{
宽度：300px；
过渡：宽度为0.4s，易于调整
}
.mapHideBtn{
显示：内联块；
宽度：50px；
高度：50px；
背景：绿色；
}
$（'.mapHideBtn'）.hover（函数（）{
if（$（this）.hasClass（“折叠”））{
$（'.searchBlock'）.removeClass（“隐藏”）.addClass（“显示”）；
$（'.mapHideBtn'）.removeClass（“折叠”）.addClass（“扩展”）；
} 
否则{
$（'.searchBlock'）.removeClass（“显示”）.addClass（“隐藏”）；
$（'.mapHideBtn'）.removeClass（“扩展”）.addClass（“折叠”）；
};
});

您可以使用

$（this）.next（）

和

切换类（）

$（'.mapHideBtn'）.hover（函数（）{
$（this.next（）.toggleClass（'显示'）；
});

---

更新：如果您想在鼠标悬停在红色条上时保持打开状态，可以使用这种纯CSS方法或将

.searchBlock

放在

.mapHideBtn

中，您需要将jQuery选择器更改为

$（this）

和

$（this）.next（）

您正在经历的是一种循环类型，它会找到您标记的所有选择器并对其运行规则

这里有一把固定的小提琴给你：

代码如下：

$('.mapHideBtn').hover(function() {
  if ($(this).hasClass("collapsed")) {
    $(this).next().removeClass("hidden").addClass("shown");
    $(this).removeClass("collapsed").addClass("expanded");
  } else {
    $(this).next.removeClass("shown").addClass("hidden");
    $(this).removeClass("expanded").addClass("collapsed");
  };
});

解决方案很简单：

<script>
    $('.mapHideBtn').hover(function(){
    if ($(this).hasClass("collapsed")) {
        $(this).next().removeClass("hidden").addClass("shown");
        $('.mapHideBtn').removeClass("collapsed").addClass("expanded");
    } 

    else {
        $('.searchBlock').removeClass("shown").addClass("hidden");
        $('.mapHideBtn').removeClass("expanded").addClass("collapsed");
    }
});
</script>

$（'.mapHideBtn'）.hover（函数（）{
if（$（this）.hasClass（“折叠”））{
$（this）.next（）.removeClass（“隐藏”）.addClass（“显示”）；
$（'.mapHideBtn'）.removeClass（“折叠”）.addClass（“扩展”）；
} 
否则{
$（'.searchBlock'）.removeClass（“显示”）.addClass（“隐藏”）；
$（'.mapHideBtn'）.removeClass（“扩展”）.addClass（“折叠”）；
}
});

这个怎么样：？

<script>
    $('.mapHideBtn').hover(function(){
    if ($(this).hasClass("collapsed")) {
        $(this).next().removeClass("hidden").addClass("shown");
        $('.mapHideBtn').removeClass("collapsed").addClass("expanded");
    } 

    else {
        $('.searchBlock').removeClass("shown").addClass("hidden");
        $('.mapHideBtn').removeClass("expanded").addClass("collapsed");
    }
});
</script>