悬停 2 个孩子时如何更改 1 个孩子的内容

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

本文关键字：孩子 悬停 何更改      更新时间：2023-09-26

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

网页代码：

<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也很好）。

谢谢。

我想你是说你想要这个：

更好的视图：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设置为，以便外部背景显示出来。如果需要，您可以将其设置为其他颜色。

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>

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

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