如何通过JS更改Hover上直接相邻同胞元素的CS

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");
  });
});

可悲的是，次要和上班的jQuery函数无法正常工作。

Answer 1

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

$(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>

Answer 2

您必须使用 .next()和 .prev() jQuery调用才能获得相邻的兄弟姐妹。

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

Answer 3

使用 next和 prev jquery来定位下一个和上一个兄弟姐妹。并使用siblings来定位所有同胞元素。

您还需要从鼠标上的h1中删除siblings类。

卸下h1的边距形式并使用padding以避免闪烁的问题。

您还使用container-inner ID两次，这不是最佳实践。改用类

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

#container {
  width: 100vw;
  height: 100vh;
  display: flex;
}
.container-inner {
  width: 50vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
h1 {
  transition: ease all .3s;
  font-size: 1rem;
  margin: 0;
  padding: 6px 0;
}
h1:hover {
  font-size: 2rem;
}
.siblings {
  font-size: 1.5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='container'>
  <div class="container-inner">
    expected result:
    <img src="https://i.imgur.com/RJS2kHM.png" />
  </div>
  <div class="container-inner">
    result:<br><br>
    <h1>Heading</h1>
    <h1>Heading</h1>
    <h1>Heading</h1>
    <h1>Heading</h1>
    <h1>Heading</h1>
    <h1>Heading</h1>
    <h1>Heading</h1>
    <h1>Heading</h1>
    <h1>Heading</h1>
    <h1>Heading</h1>
  </div>
</div>