2010-12-03 2 views
2

나는이 곳을 본 적이 있지만 그것은 올바른 만약 내가 말해 더 많은 정보를 찾을 수 없습니다 :활성 : 호버 같은 활성 및 호버 의사 선택기를 결합하는 것이 맞습니까?

.selector a:active:hover { color: #777; } 
.selector a:hover:active { color: #777; } 

나는 그것이 2의 하나였다 기억하지 않습니다.

하지만 어느 쪽이든 파이어 폭스는 그걸 좋아하지 않고 아무것도하지 않습니다.

나쁜 연습을 보여주는 또 다른 예입니다. ??

답변

7

둘 다 괜찮습니다 (동일하게 동일합니다). 난 그냥 파이어 폭스 4.0b6/맥에서 테스트하고 정확히 예상대로 작동합니다. 아래 예제에서 링크를 가리키면 빨간색으로 변하고 마우스 버튼을 누르고 있으면 녹색으로 변합니다.

<!DOCTYPE HTML> 
<title>Test</title> 
<style> 
a:hover { color: red; } 
a:active { color: yellow; } 
a:hover:active { color: green; } 
</style> 
<h1><a href="test">gggg</a></h1> 

키보드로 마우스를 활성화했을 때와 달리 링크를 다르게 지정하고 싶지 않은 경우는 드뭅니다.

고전적인 실수를하는 것으로 의심됩니다. :active은 "href 속성의 값이 현재 페이지의 URI로 해석되는 경우"가 아니라 "활성화되는 동안 (예 : 마우스 버튼이 눌려있는 동안)"을 의미합니다.

"href 속성의 값이 현재 페이지의 URI로 해석 될 때"라는 뜻의 의사 클래스가 없기 때문에 클래식 패턴은 "현재"또는 "선택된"클래스를 서버에 HTML을 보내기 전에

+0

맞습니다. 실제로 마우스를 누르면 (작동 중) 작동합니다. 이 구문이 활성 또는 호버를 의미하는 것으로 예상했기 때문에 호버 만 테스트 했으므로 아무 것도하지 않아 작동하지 않는다고 가정했습니다. – pnichols

+0

CSS 선택기에서 "또는"을 얻는 유일한 방법은 그룹화 (','및 여러 개의 전체 선택 자 세트 사용)입니다. – Quentin

+0

활성 및 가져 오기를 의미하는 경우 쓸모가 없습니다. : 특이한). 나는 이것이 활성과 호버를 결합하여 구문을 줄이는 데 사용될 수 있다고 생각했다. ... – pnichols

-3

올바르지 않고 작동하지 않으므로 분리해야합니다.

.selector a:active, .selector a:hover { color: #777; } 
+0

내 downvote가 아니라 CSS에서 쉼표는 "또는"을 의미합니다. OP가 "and"를 찾고 있습니다. –

+0

아니요, 정확하지 않습니다. 쉼표는 여러 규칙이 정의를 공유하고 있음을 의미합니다. 쉼표없이 나는 앵커 요소와 함께 클래스 선택기가있는 요소를 그 밑에있는 선택기의 다른 요소와 함께 나타내려고합니다. –

+0

추가하려면 "AND"는 부적합합니다. 요소는 : active 및 : hover 상태를 동시에 공유 할 수 없습니다. –

-2

이어야한다

a.selector : 활성 : 가져가 {색상 : # 777; }

a.selector : hover : active {color : # 777; }

하지

.selector : 활성 : 가져가 {색상 : # 777; }

. 선택기 a : 마우스 오버 : 활성 (색상 : # 777; }

단순함 : P

+3

OP가 그의 마크 업을 게시하지 않았기 때문에'a' 엘레멘트에'selector' 클래스가 있는지 알 수있는 방법이 없습니다. OP의 예제는'a'의 컨테이너에'selector '클래스가 있다면 괜찮을 것입니다. – lincolnk