스윙 텍스트가 호버상에서 바뀌지 않는다

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의 직접적인 하위 항목이 아니므로 선택자가 선택하지 않습니다. 이 경우 ">"이 제거 될 수 있습니다. 그 옆에는 ID가 항상 고유해야합니다.

이

전혀 작동하지 않습니다 :

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

당신은 span.letter를 선택하기 위해 노력하고있다 사업부의 자식으로, # 유명 인사 목록의 직접적인 자식으로, .links의 자식으로 : div의 자식으로 hover, 유명인리스트의 직계 아이.

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

또 다른 옵션은 DIV 안에 span.letter 배치하는 것입니다 : 당신은 당신이 사업부 번호 연결 후이 요소 를 넣고 다음과 같이 선택해야 span.links에게 텍스트 색상을 변경하려면

. 링크 (A 직접 자식으로) 다음과 같은 선택 사용 : 당신이 정말로 당신의 HTML에 div.links 당신은 달성하기 위해 자바 스크립트를 사용해야하기 전에 span.letter에 남겨 둡니다

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

을 결과는 원했다.

Answer 2

div.links가 span.letter

의 형제가 당신의 선택은 당신이 스타일을 적용 할 수있는 마크 업의 부모이어야합니다 때문입니다.