2016-03-14 57 views
2

我想完成的事情相當簡單,但對我來說很複雜。我想徘徊在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是沒關係。)

謝謝。

+0

你的意思是,雖然'創意'在浩ver,'clean'和'responsive'會得到不同的背景嗎? –

+0

是的,有點像。 – Graphicoding

回答

2

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>

+1

這就像我想要的一樣!我給你的答案是因爲你提供了代碼和代碼片段。謝謝! – Graphicoding

4

我想你是說你要這樣:

更好地在這裏查看: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所以外部背景顯示通過。如果需要,您可以將其設置爲不同的顏色。

+0

謝謝你的回答,但我確實希望他們都以白色背景開頭(不是粉紅色)。如果你編輯你的答案,我會很感激,謝謝。 – Graphicoding

+0

@Graphicoding:他們確實以白色背景開始。 – 2016-03-15 15:04:43

+0

我的意思是我不想懸停在'.servhold'上,並讓我的'.serv'變成粉紅色。但感謝您的幫助! – Graphicoding

1

你原來background-color相反,你可以綁定懸停事件類「.serv」,然後添加粉紅色背景的所有元素,並使背景透明的元素上懸停功能被稱爲

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

好的概念,會盡快嘗試,並向我認爲有最佳答案的人聲明答案。謝謝。 – Graphicoding