Текст пробега не меняется при зависании

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 не являются прямыми детьми из списка знаменитостей, поэтому эти селекторы не будут выбраны. В этой ситуации можно удалить «>». Рядом с этим идентификатор всегда должен быть уникальным.

Это не работает на всех:

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

Вы пытаетесь выбрать span.letter, как ребенок из DIV, в качестве прямого потомка # знаменитости списка, как ребенка .links : hover, как дочерний элемент div, как прямой ребенок из # списка знаменитостей.

Если вы хотите изменить цвет текста span.links вы должны поместить этот элемент после в Div # ссылок и выберите его следующим образом:

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

Другой вариант поставить span.letter внутри дел. ссылки (как прямого ребенка) и использовать следующий селектор:

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

Если вы действительно хотите оставить span.letter перед тем div.links в вашем HTML, вы должны использовать JavaScript для достижения результат хотел.

Answer 2

это потому, что div.links является родной брат span.letter

ваш селектор должен быть родителем разметки вы можете захотеть применить стиль.