我想完成的事情相當簡單,但對我來說很複雜。我想徘徊在1個孩子上,而另外2個孩子則改變背景顏色。併爲所有3個孩子做同樣的事情。如何在懸停1個孩子時更改2個孩子的內容?
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是沒關係。)
謝謝。
你的意思是,雖然'創意'在浩ver,'clean'和'responsive'會得到不同的背景嗎? –
是的,有點像。 – Graphicoding