如何在悬停 1 child 时更改 2 child 的内容？

Question

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

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 所以外层背景显示通过。如果需要，您可以将其设置为不同的颜色。

Answer 2

jQuery 方法是：
第一个函数-改变siblings background.
第二个功能- 重新启动 siblings background- 将原来的 background-color 放在那里而不是 initial

$('.servhold .serv').hover(function() {

  $(this).siblings('.serv').css('background-color', 'pink');

}, function() {

  $(this).siblings('.serv').css('background-color', 'initial');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<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>

Answer 3

你可以将悬停事件绑定到class'.serv'，然后为所有元素添加粉红色背景，并在调用悬停功能的元素上使背景透明

$('.serv').hover(function(){
    $('.serv').css({'background-color': 'pink'});
    $(this).css('background', 'transparent');
});

如何在悬停 1 child 时更改 2 child 的内容？

How to change content of 2 childs when hover 1 child?

html

javascript

css

jquery

hover