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;
}
所以，用我的邏輯，徘徊在div後 「盒子」 文本應該變成紅色。 我很不確定爲什麼它不會發生。
~是general sibling combinator。 .turn不是.box的兄弟，所以風格不適用。
你可以使用.box:hover .turn
您使用了錯誤的選擇：
這將工作！
.box:hover > .turn {
color: red;
}
沒有......因爲~是兄弟選擇，而在你的例子中，.turn元素是.box
http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
試試這個孩子......
.box:hover .turn{
color:red;
}
@musefan現在檢查編輯的代碼.. –
我認爲這也有助於解釋原始嘗試的問題，而不是僅僅發佈一些修改的代碼。以Sachin的答案作爲一個很好的解釋的例子 – musefan
.box .turn:hover{
color: red;
}
也ü可以使用：
.box p.turn:hover{
color: red;
}
，如果你可以使用填充上.box的所以用這個
.box:hover >p.turn{
color: red;
}
如果OP想要在'.box'懸空時更改樣式，這不是一個好的解決方案。添加填充到'.box'不適用於您的解決方案。 – musefan
~ 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;
}
所以...你有什麼建議的解決方案呢？ – musefan
我很確定他沒有提及解決方案，因爲那裏已經有足夠的答案。 –
確切地說，加上鍊接的文章有很多例子。 OP沒有要求解決方案，只是一個解釋。 –