跨度文本不改變懸停

Question

我剛剛學習CSS3和HTML5，現在我試圖讓我的跨文本過渡到另一種顏色，當鼠標懸停在.link div與下面的代碼。出於某種原因，它不工作，我已經嘗試了幾件事情，以使其工作，但迄今沒有運氣。

任何人都可以幫助我解決問題或指向正確的方向嗎？

謝謝！

-

HTML

<div id="celebrity-list"> 
    <header> 
     <h2>Celebrities</h2> 
    </header> 

    <div id="a"> 
     <span class="letter">A.</span> 
     <div class="links"> 

     </div> 
    </div> 
</div> 

CSS

#celebrity-list > div span.letter{ 
    position: relative; 
    font: 22px Arial; 
    color: #3a3a3a; 
    -webkit-transition: color .3s ease-out; 
    -moz-transition: color .3s ease-out; 
    -o-transition: color .3s ease-out; 
    -ms-transition: color .3s ease-out; 
    transition: color .3s ease-out; 
} 

#celebrity-list > div .links:hover #celebrity-list > div span.letter{ 
    color: #b43838; 
} 

#celebrity-list > div .links{ 
    position: relative; 
    width: 190px; 
    height: 342px; 
    background: #f2f2f2; 
    -webkit-transition: border .3s ease-out; 
    -moz-transition: border .3s ease-out; 
    -o-transition: border .3s ease-out; 
    -ms-transition: border .3s ease-out; 
    transition: border .3s ease-out; 
} 

Answer 1

起初，你的CSS選擇器是不正確的。 x> y選擇器僅選擇直接的孩子。 span.letter和div.links都不是＃名人名單的直接子女，所以不會被這些選擇者選中。在這種情況下，「>」可能會被刪除。接下來，一個ID應該始終是唯一的。

這不工作：

#celebrity-list > div .links:hover #celebrity-list > div span.letter{ 
    color: #b43838; 
} 

您嘗試選擇span.letter，作爲一個div的孩子，因爲＃名人名單的直接孩子，作爲.links的孩子：作爲div的孩子，作爲＃名人名單的直接子女懸停。

如果你想改變span.links文字的顏色，你應該把這個元素後在div＃鏈接並選擇它，如下所示：

div.links:hover + span.letter { /* your CSS */ } 

另一種選擇是把span.letter內格。鏈接（作爲直接子），並使用以下選擇：

div.links:hover > span.letter { /* your CSS */ } 

如果你真的想在你的HTML div.links你應該使用JavaScript來實現之前span.letter離開結果通緝。

Answer 2

這是因爲div.links是span.letter

的兄弟你的選擇一定是你可能希望應用樣式的標記的父。