CSS 호버 선택기가 작동하지 않습니다.

이상한 CSS 문제가 발생했습니다.CSS 호버 선택기가 작동하지 않습니다.

아마도 클래스를 사용하지 않고 태그 이름을 직접 사용하기 때문에 가능하지만 문제가 무엇인지 배우기를 원하므로 반복하지 마십시오.

<div class='container'> 
    <div class='top'> 
     <a href='href.com'>hover here..</a> 
    </div> 
    <div class='bottom'> 
     <a>..and this should change</a> 
    </div> 
</div>

내가 CSS로 뭘하려 :

내 HTML은 다음과 같이이다

.top a:hover .bottom a 
{ 
    color:#f00; /* does not work */ 
} 
.top a:hover .container 
{ 
    background-color:#f00; /* does not work */ 
} 
.top a:hover 
{ 
    color:#f00; /* works */ 
}

는 왜 다른 요소에 대한 호출이 작동하지 않습니다?

나는 부모에게서 자식에게 전화하고 있기 때문에 그렇습니까?

만약 그렇다면 어떻게 작동시킬 수 있습니까?

감사합니다.

출처

2013-07-15 jeff

당신의 CSS 선택기의 작동 방식에 대한 이해는 잘못되었습니다. 계층을 백업 할 수는 없습니다. – jmoerdyk

@jmoerdyk 예 첫 번째 예제는 부모를 선택하려고 시도하고 있습니다. 지금 받으십시오. 하지만 두 번째는 어떨까요? 즉 형제를 선택? 그것도 불가능한가요? – jeff

귀하의 CSS는 잘못, 당신의 잊어 쉼표입니다 :

.top a:hover, .bottom a:hover 
{ 
    color:#f00; 
} 
.top a:hover, .container:hover /* Comma was missing here */ 
{ 
    background-color:#f00; 
}

출처

2013-07-15 23:45:09

쉼표를 추가하면 .bottom a와 .container는 항상 # f00이됩니다. 틀렸습니까? – jeff

나는 당신이 호버에서만 그것을 원한다는 것을 얻지 못했습니다. 지금 업데이트해야합니다. 달성하려는 내용을 더 잘 설명해주십시오. –

.top a가 바뀌면 .bottom을 변경하려고합니다. – jeff

년 늦게, 그러나 여기에서 실수를 한단다 사람은 CSS를로 다음 사용을 위해 :

.top:hover ~ .bottom {color: red;}

http://jsfiddle.net/Xb62A/

출처

2014-01-20 23:12:30 amars

CSS 호버 선택기가 작동하지 않습니다.

답변

관련 문제