Javascript 如何通过JS更改hover上直接相邻的兄弟元素的CSS？

我想更改悬停元素的直接相邻同级的css样式，因此如果我悬停元素4，元素3和5应该添加一个新的css类

下面是一个JSFIDLE，其中包含了预期的结果和我目前得到的结果：

---

遗憾的是，nextSibling和previousSibling jquery函数没有像我预期的那样工作。

您可以使用jquery的

.next

和

.prev

方法

$（文档）.ready（函数（）{
$（“h1”）.hover（函数（）{
$（this.sides（）.removeClass（“sides”）
$（this.next（）.addClass（“兄弟”）；
$（this.prev（）.addClass（“兄弟”）；
});
});
。兄弟姐妹{
颜色：绿色
}

C
A.
B
使用
next
和
prev
jQuery以下一个和上一个兄弟姐妹为目标。并使用
同级
以所有同级元素为目标

此外，您还需要在鼠标离开时从
h1
中删除
同级
类

从
h1
中删除边距，并使用
填充来避免闪烁问题

您还使用了两次
容器内部
id，这不是最佳做法。改用类


$（“h1”）.hover（函数（）{
$（this.sides（）.removeClass（“sides”）
$（this.next（）.addClass（“同级”）
$（this.prev（）.addClass（“兄弟”）；
}，函数（）{
$（“h1”）.removeClass（“同级”）
});
#容器{
宽度：100vw；
高度：100vh；
显示器：flex；
}
.货柜内{
宽度：50vw；
高度：100vh；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
h1{
过渡：放松一切；
字号：1rem；
保证金：0；
填充：6px0；
}
h1：悬停{
字号：2rem；
}
.兄弟姐妹{
字体大小：1.5rem；
}

预期结果：
结果：


标题
标题
标题
标题
标题
标题
标题
标题
标题
标题
您必须使用
.next（）
和
.prev（）
JQuery调用来获取相邻的同级

$(document).ready(function() {
  $("h1").hover(function(){
    $(this).siblings().removeClass("siblings");
    $(this).next().addClass("siblings");
    $(this).prev().addClass("siblings");
  });
});

他们还需要在开始时删除
同级
类，否则一切都会逐渐获得该类。（另外，询问者拥有的
addClass（）
可能比设置道具要好，因为您可能会覆盖任何现有的类）我的人，谢谢：）我能够得到我想要的结果。多亏了DBS，我添加了一行代码，在将其添加到相邻元素之前，从h1元素中删除所有同级类。谢谢各位。您可以像$（this）.prev（）.addClass（“兄弟”）一样使用.prev（）和.next（）来执行此操作$（this）.next（）.addClass（“兄弟”）；
$(document).ready(function() {
  $("h1").hover(function(){
    $(this).siblings().removeClass("siblings");
    $(this).next().addClass("siblings");
    $(this).prev().addClass("siblings");
  });
});