쓰는 방법 : 전에 및 a : 후에 조건을 가리 킵니까?
쓰는 :hover법과 :visited조건은 a:before?
노력하고 a:before:hover있지만 작동하지 않습니다
이것은 실제로하려는 일에 달려 있습니다.
요소가 의사 클래스와 일치 :before할 때 의사 요소에 스타일을 적용하려면 간단히 a작성 a:hover:before하거나 a:visited:before대신 작성해야합니다 . 의사 요소는 의사 클래스 뒤에 옵니다 (실제로 전체 선택기의 끝에서). 또한 그것들은 서로 다른 두 가지입니다. 이것을 "의사 선택기"라고 부르면 이와 같은 구문 문제가 발생하면 혼동 될 것입니다.
CSS3를 작성하는 경우 이중 구분선으로 의사 요소를 표시하여이 구분을 더 명확하게 할 수 있습니다. 따라서, a:hover::before및 a:visited::before. 그러나 IE8 및 이전 버전과 같은 레거시 브라우저를 개발하는 경우 단일 콜론을 사용하면 문제를 해결할 수 있습니다.
의사 클래스와 의사 요소의 특정 순서는 사양에 명시되어 있습니다 .
하나의 의사 요소가 선택기의 마지막 간단한 선택기 시퀀스에 추가 될 수 있습니다.
간단한 시퀀스 선택기는 연결자에 의해 분리되지 않는 간단한 선택기의 체인이다. 항상 유형 선택기 또는 범용 선택기로 시작합니다. 시퀀스에 다른 유형 선택기 또는 범용 선택기가 허용되지 않습니다.
간단한 선택기 어느 타입 선택기 선택자, 속성 선택기 클래스 선택기 ID 선택기 또는 가상 클래스이다.
의사 클래스는 간단한 선택기입니다. 그러나 의사 요소는 단순한 선택기와 유사하지만 그렇지 않습니다.
그러나 :hover1 과 같은 사용자 작업 의사 클래스의 경우 사용자가 의사 요소 자체와 상호 작용하고 요소가 아닌 요소와 상호 작용할 때만 적용하려면이 효과가 필요한 경우 a모호한 레이아웃 종속 해결 방법 이외의 다른 방법으로는 불가능합니다 . 텍스트에서 알 수 있듯이 표준 CSS 의사 요소는 현재 의사 클래스를 가질 수 없습니다. 이 경우 :hover의사 요소 대신 실제 자식 요소 에 적용해야합니다 .
1 물론 :visited의사 요소는 링크가 아니기 때문에 질문 과 같이 의사 클래스를 연결하는 경우에는 적용되지 않습니다 .
a:hover::before대신 쓰기 a::before:hover: example .
마우스 오버시 메뉴 링크의 텍스트를 변경합니다. (호버의 다른 언어 텍스트)는 다음과 같습니다.
html :
<a align="center" href="#"><span>kannada</span></a>
CSS :
span {
font-size:12px;
}
a {
color:green;
}
a:hover span {
display:none;
}
a:hover:before {
color:red;
font-size:24px;
content:"ಕನ್ನಡ";
}
사용하려고 .card-listing:hover::after hover하고 after사용하여 ::그것을 줘야 일을
BoltClock의 답변이 맞습니다. 내가 추가하려는 유일한 것은 의사 요소 만 선택하려면 범위를 두는 것입니다.
예를 들면 다음과 같습니다.
<li><span data-icon='u'></span> List Element </li>
대신에:
<li> data-icon='u' List Element</li>
이렇게하면 간단하게 말할 수 있습니다
ul [data-icon]:hover::before {color: #f7f7f7;}
이것은 전체 li 요소가 아닌 의사 요소만을 강조합니다.
이 코드에서와 같이 올바른 괄호 ( ">")를 사용하여 작업을 하나의 클래스로 제한 할 수도 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span {
font-size:12px;
}
a {
color:green;
}
.test1>a:hover span {
display:none;
}
.test1>a:hover:before {
color:red;
content:"Apple";
}
</style>
</head>
<body>
<div class="test1">
<a href="#"><span>Google</span></a>
</div>
<div class="test2">
<a href="#"><span>Apple</span></a>
</div>
</body>
</html>
참고 : hover : before 스위치는 .test1 클래스에서만 작동합니다.
참고 URL : https://stackoverflow.com/questions/5777210/how-to-write-hover-condition-for-abefore-and-aafter
'Programming' 카테고리의 다른 글
| Java에서 HashMap과 Map 객체의 차이점은 무엇입니까? (0) | 2020.03.05 |
|---|---|
| 경고를 시도 / 잡을 수 있습니까? (0) | 2020.03.05 |
| CORS-프리 플라이트 요청 도입의 동기는 무엇입니까? (0) | 2020.03.05 |
| ggplot2 R 플롯에서 축 제한을 설정하는 방법은 무엇입니까? (0) | 2020.03.05 |
| 쿼리 실행 계획을 얻으려면 어떻게합니까? (0) | 2020.03.05 |