立即更改兩個div的背景顏色

因此，我需要製作一個div鏈接，並在用鼠標懸停在該div上時更改背景顏色。問題是，這個div內有兩個子div，當我將鼠標移動到父div的邊界時，它實際上是在一個子div上。所以雖然我可以做到這一點，這些孩子divs的變化懸停第二個不是。立即更改兩個div的背景顏色

所以我想我的問題是，有沒有辦法讓兩個孩子divs徘徊一個使用CSS時改變？

我不介意更改代碼來使用表，如果更容易，但我需要找到某種方式來使整個div/tr更改時，懸停在一個孩子/ td。

實際上是在尋找什麼即時在這裏創建是次的YouTube推薦視頻盒的東西幾乎一樣（在頁面的德權）

在此先感謝

CSS

#parent { 
width: 318px; 
height: 90px; 
background-color: #FFFFFF; 
margin: 5px 0px 5px 0px; 
font-size: 10px; 
} 

#parent :hover { 
background-color: #0000ff; 
} 

#child1 { 
width:120px; 
float:left; 
} 

child2 { 
width:188px; 
float:right; 
}

HTML （與其他一些東西）

<c:forEach var="item" items="${list}"> 
<a href="webpage?item.getinfo()"> 
    <div id="parent"> 
     <div id="child1"> 
      <img src="img.jpg"> 
     </div> 
     <div id="child2"> 
      ${item.getinfo2()} <br> 
      ${item.getinfo3()} <br>      
     </div> 
    </div> 
</a> 
</c:forEach>

代碼是一些就像那樣。我一直黑客它在過去的一段時間，但，這是什麼像什麼，我

來源

2012-02-11 Predz

請張貼您的代碼。 – elclanrs 2012-02-11 04:11:45

我想你可能只需要修復一行CSS。變化：

#parent :hover { 
    background-color: #0000ff; 
}

到：

#parent:hover { 
    background-color: #0000ff; 
}

這似乎爲我工作。

來源

2012-02-11 05:32:21 Brandan

我現在面臨着如此艱難的手腳。我花了3個小時玩這個遊戲，並且因爲它沒有工作的空間。它太可愛了，它很有趣。感謝大家的回覆。 – Predz 2012-02-11 05:44:22

之前曾嘗試此http://jsfiddle.net/rsarika/rtGw5/1/

來源

2012-02-11 04:20:06 Rahul

** Rahul **看看我的答案** nolt2232 ** – elclanrs 2012-02-11 04:26:37

您是否嘗試過使用jQuery？你可以做這樣的事情：

http://jsfiddle.net/UtdYY/

HTML：

<div class='color'> 
    <div class='color child'>test123</div> 
    <div class='color child'>test456</div> 
</div>

的Javascript：

$('.color').hover(function(){ $(this).toggleClass('red'); });

CSS：

.red { color:red; } 
.child {height: 50px; }

編輯：盪滌的JavaScript，感謝elclanrs

來源

2012-02-11 04:21:22 nolt2232

您的jQuery代碼可能會工作，但它很混亂，可以改進以獲得最佳性能。 '$（'。color'）。hover（function（）{$（this）.toggleClass（'red'）;}）;'。一條線。 – elclanrs 2012-02-11 04:24:37

謝謝elclanrs。良好的糾正。對我來說有點馬虎。 – nolt2232 2012-02-11 04:28:00

如果你能夠將鼠標懸停在一個第一，你只需要CSS：

.mavehoverable > div:hover, .makehoverable > div:hover + div { 
    background-color: red; 
}

有了這個HTML：

<div class="makehoverable"> 
    <div>Child 1</div> 
    <div>Child 2</div> 
</div>

將鼠標懸停在子1上也會突出顯示Child 2.反之亦然在CSS中不起作用，因此需要一些JS。

來源

2012-02-11 04:27:05

是的，這是要走的路。這種東西不需要jQuery。我即將發佈類似的東西，但我還沒有看到HTML代碼，以確切地看到他的意思。這個問題很模糊。 – elclanrs 2012-02-11 04:28:49

如何將兒童的背景顏色設置爲透明？包含div仍然會：懸停。所以：.maptyoverable：hover {background-color：red; } .makehoverable div {background-color：transparent; } – eric 2012-02-11 04:58:01

立即更改兩個div的背景顏色

回答

相關問題