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

Question

我想完成的事情相当简单，但对我来说很复杂。我想徘徊在1个孩子上，而另外2个孩子则改变背景颜色。并为所有3个孩子做同样的事情。

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

jQuery的方法是：
第一功能 - 改变siblings background。
二级功能 - 重新启动siblings background -put那里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 2

我想你是说你要这样：

更好地在这里查看：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>

的:hover在.servhold把它们所有的粉红色，但:hover的.serv设置为transparent所以外部背景显示通过。如果需要，您可以将其设置为不同的颜色。

Answer 3

你原来background-color相反，你可以绑定悬停事件类“.serv”，然后添加粉红色背景的所有元素，并使背景透明的元素上悬停功能被称为

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