javascript - 悬停 1 个 child 时如何更改 2 个 child 的内容？

Question

我想要完成的事情相当简单，但对我来说完成起来却很复杂。我试图将鼠标悬停在 1 个 child 身上，而其他 2 个 child 则改变背景颜色。对所有 3 个 child 都做同样的事情。

HTML 代码:

<div class="servhold">
    <div class="serv">
        <h1>Clean</h1>
        <p>test test test test test test test
            test test test test test test test
            test test test test test test test
        </p>
    </div>
    <div class="serv">
        <h1>Creative</h1>
        <p>test test test test test test test
            test test test test test test test
            test test test test test test test
        </p>
    </div>
    <div class="serv">
        <h1>Responsive</h1>
        <p>test test test test test test test
            test test test test test test test
            test test test test test test test
        </p>
    </div>
</div>

CSS 代码(我试过):

.servhold .serv:hover:nth-child(1) + .serv:nth-child(n+2){
    background-color: pink;
}
// hover 1 change background 2+3
.servhold .serv:hover:nth-child(2) + .serv:nth-child(1) , .serv:nth-child(3){
    background-color: pink;
}
// hover 2 change background 1+3
.servhold .serv:hover:nth-child(3) + .serv:nth-child(1) , .serv:nth-child(2){
    background-color: pink;
}
// hover 3 change background 1+2

任何帮助将不胜感激(Javascript 或 Jquery 也很好。)

谢谢。

Answer 1

我想你是说你想要这个:

在这里查看效果更佳: https://jsfiddle.net/wsbLy0b2/1/

.servhold:hover .serv {
  background-color: pink;
}

.servhold:hover .serv:hover {
  background-color: transparent;
}

<div class="servhold">

  <div class="serv">
    <h1>Clean</h1>
    <p>test test test test test test test test test test test test test test test test test test test test test
    </p>
  </div>
  <div class="serv">
    <h1>Creative</h1>
    <p>test test test test test test test test test test test test test test test test test test test test test
    </p>
  </div>
  <div class="serv">
    <h1>Responsive</h1>
    <p>test test test test test test test test test test test test test test test test test test test test test
    </p>
  </div>
</div>

.servhold 上的 :hover 将它们全部变成粉红色，但是 .serv 上的 :hover > 将特定的设置为 transparent，以便外部背景显示出来。如果需要，您可以将其设置为不同的颜色。