2013-10-21 26 views
0

HTML代碼懸停「框」後文本不應該改變顏色嗎?

<div class="box"> 
<p class="turn">shou</p> 
</div> 

CSS代碼

.turn { 
    font-size: 50px; 
    text-align:center; 
    padding:150px; 
    color: white; 
} 
.box { 
    height:500px; 
    width:500px; 
    background-color: blue 
} 
.box:hover ~ .turn { 
    color: red; 
} 

jsfiddle

所以,用我的邏輯,徘徊在div後 「盒子」 文本應該變成紅色。 我很不確定爲什麼它不會發生。

回答

2

您正在使用兄弟選擇器~,但.turn.box元素的孩子。所以你需要使用子選擇器,即>

.box:hover > .turn { 
    color: red; 
} 

JsFiddle Demo

1

您使用了錯誤的選擇:

這將工作!

.box:hover > .turn { 
    color: red; 
} 
0

試試這個孩子......

.box:hover .turn{ 
color:red; 
} 
+0

@musefan現在檢查編輯的代碼.. –

+0

我認爲這也有助於解釋原始嘗試的問題,而不是僅僅發佈一些修改的代碼。以Sachin的答案作爲一個很好的解釋的例子 – musefan

0
.box .turn:hover{ 
     color: red; 
    } 

也ü可以使用:

.box p.turn:hover{ 
    color: red; 
} 

,如果你可以使用填充上.box的所以用這個

.box:hover >p.turn{ 
    color: red; 
} 
+0

如果OP想要在'.box'懸空時更改樣式,這不是一個好的解決方案。添加填充到'.box'不適用於您的解決方案。 – musefan

0

~ CSS選擇器被稱爲Sibling Selector

如果您的標記(HTML)是這樣的:

<div class="box"> 
</div> 
<p class="turn">shou</p> 

那麼你的CSS將完全,因爲在DOM樹中,<p>節點是<div>節點的兄弟工作。

DOM樹上面HTML:

 <document-root> 
      | 
      | 
    _______|_______ 
    |    | 
    <div>   <p> 

但在您的標記,該<p>元素實際上是<div>的子節點。和DOM樹是:

 <document-root> 
      | 
      | 
      <div> 
      | 
      | 
      <p> 

所以,你應該用一個child selector>因爲<p>是直接孩子或者你可以簡單的離開.box.turn之間的空間(這是descendant selector)。

因此,最終的CSS應該是:

.turn { 
    font-size: 50px; 
    text-align:center; 
    padding:150px; 
    color: white; 
} 
.box { 
    height:500px; 
    width:500px; 
    background-color: blue 
} 
.box:hover .turn { 
    color: red; 
} 

更新小提琴:http://jsfiddle.net/sH3Dh/7/