'a:before'와 'a:after'에 대해 ':hover' 조건을 어떻게 쓸 수 있습니까?
어떻게 써야 합니까?:hover그리고.:visited을 위한 조건.a:before?
난 노력하고 있어.a:before:hover하지만 작동하지 않습니다.
이것은 여러분이 실제로 무엇을 하려고 하는지에 달려 있습니다.
단순히 스타일을 적용하려는 경우:before의사-의사-의사-의사는a요소가 유사 클래스와 일치하므로 작성해야 합니다.a:hover:before또는a:visited:before대신.유사 요소는 유사 클래스 뒤에 옵니다(실제로 전체 선택기의 맨 끝에 있습니다).또한 이 두 가지는 서로 다른 것입니다. 두 가지를 모두 "의사 선택기"라고 부르는 것은 이와 같은 구문 문제에 부딪히면 혼동을 일으킬 수 있습니다.
CSS3를 작성하는 경우 이중 콜론으로 유사 요소를 표시하여 이 구별을 더 명확하게 할 수 있습니다.이런 이유로,a:hover::before그리고.a:visited::before그러나 IE8 및 이전 버전과 같은 기존 브라우저를 위해 개발 중인 경우 단일 콜론을 사용하는 것이 좋습니다.
유사 클래스 및 유사 요소의 특정 순서는 사양에 명시되어 있습니다.
하나의 유사 요소를 셀렉터의 단순 셀렉터 마지막 시퀀스에 추가할 수 있습니다.
단순 선택기의 시퀀스는 조합으로 분리되지 않은 단순 선택기의 체인입니다.항상 유형 선택기 또는 범용 선택기로 시작합니다.시퀀스에는 다른 유형 선택기 또는 범용 선택기가 허용되지 않습니다.
단순 선택기는 유형 선택기, 범용 선택기, 속성 선택기, 클래스 선택기, ID 선택기 또는 유사 클래스입니다.
유사 클래스는 단순 선택기입니다.그러나 유사 요소는 단순 선택기와 유사하지만 그렇지 않습니다.
그러나 다음과 같은 사용자 작업 유사 클래스의 경우:hover사용자가 의사 매개 변수 자체와 상호 작용하지만 의사 매개 변수 자체와 상호 작용할 때만 적용하려면 이 효과가 1필요합니다.a요소를 사용하면 레이아웃 의존적인 모호한 해결 방법을 사용하는 것 이외에는 불가능합니다.텍스트에서 암시하는 바와 같이 표준 CSS 유사 요소는 현재 유사 클래스를 가질 수 없습니다.이 경우, 당신은 신청해야 할 것입니다.:hover유사 요소 대신 실제 하위 요소로 이동합니다.
1 물론 이는 다음과 같은 링크 유사 클래스에는 적용되지 않습니다.:visited질문에서와 같이, 사이비 종교는 연결고리가 아니기 때문입니다.
기a:hover::before에 a::before:hover예문
마우스로 메뉴 링크의 텍스트를 변경하려면(다른 언어 텍스트를 마우스로 가리키면) 다음과 같이 하십시오.
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용사를 ::있을 것입니다.그건 작동할 것이다.
또는 설정할 수 있습니다.pointer-events:none의 신에게에.a와 소와요pointer-event:all의 신에게에.a:before요소에 호버 CSS를 추가합니다.
a{
pointer-events: none;
}
a:before{
pointer-events: all
}
a:hover:before{
background: blue;
}
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>
참고: 호버:before 스위치는 .test1 클래스에서만 작동합니다.
언급URL : https://stackoverflow.com/questions/5777210/how-can-i-write-a-hover-condition-for-abefore-and-aafter
'programing' 카테고리의 다른 글
| pip 설치를 사용하지 않고 tar.gz 파일에서 Python 패키지를 설치하는 방법 (0) | 2023.08.18 |
|---|---|
| jQuery: 동일한 이벤트에 대한 두 개 이상의 핸들러 (0) | 2023.08.18 |
| 문자열 끝에서 마지막 쉼표(및 마지막 쉼표 뒤에 공백이 있을 수 있음) 제거 (0) | 2023.08.13 |
| 파이썬에서 클래스를 확장하는 방법은 무엇입니까? (0) | 2023.08.13 |
| 도커 컨테이너 내부에서 프로세스가 실행되고 있는지 확인하는 방법은 무엇입니까? (0) | 2023.08.13 |