javascript - 如何通过 JS 更改悬停时直接相邻的兄弟元素的 CSS？

Question

我想更改悬停元素的直接相邻兄弟的 css 样式，所以如果我悬停元素 4，元素 3 和 5 应该添加一个新的 css 类。

这是一个 JSfiddle，它具有预期的结果以及我目前得到的结果:

http://jsfiddle.net/uxa49myL/5/

$(document).ready(function() {
  $("h1").hover(function() {
    $(this).nextSibling.addClass("siblings");
    $(this).previousSibling.addClass("siblings");
  });
});

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

Answer 1

可以使用jquery的.next和.prev方法

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

.siblings {
  color:green
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>C</h1>
<h1>A</h1>
<h1>B</h1>