스팬 내 호버 <a> 태그

Question

<a> 태그 안에 스팬을 사용하고 있습니다. 호버의 색을 <span> 아래의 텍스트에서만 변경하여 기본 호버 CSS를 무시합니다.

<div id="box"> 
    <h4>Title</h4> 
    <p><a href="#"><span>Profile</span></a> | 
     <a href="#">Logout</a></p> 
    </div> 

이 예에서는 스팬 텍스트에만 다른 마우스를 가져 가야합니다. CSS에서 이것을 어떻게 정의해야합니까?

나는이 작동하지 않습니다

#box span:hover{ 
color: #000;} 

모두

#box a:hover span{ 
color: #000;} 

및

을 시도했습니다.

Answer 1

당신은 앵커의 :hover 의사 클래스로 후크 다음 <span> 요소를 타겟팅 할 수 있습니다 : 또는

a:hover span { 
    color: red; 
} 

을, 당신은 또한 예를 들어, 범위의 :hover 의사 클래스 스타일을 지정할 수 있습니다 :

를

a span:hover { 
    color: red; 
} 

Answer 2

선택기의 일부로 span:hover을 사용하거나 실제로 원하는 것에 따라 something:hover span을 사용하면됩니다.