CSS :active selector의 예제 코드에 대한 자세한 설명
- 黄舟원래의
- 2017-07-19 17:07:192019검색
Active
active의 한 구절은 영어로 "active"로 해석되는데, 이는 마우스 클릭을 의미합니다. 액티브 셀렉터의 가장 일반적인 예는 아마도 링크에 적용될 것입니다. 그러나 링크를 여는 것은 순간적인 동작이므로 액티브 셀렉터의 특성을 잘 반영하지 못합니다.
Active의 특징
사실 active로 링크를 열 때 active를 활성화시키는 과정이 있는데, 모듈을 릴리즈할 때까지 해당 모듈을 클릭하는 것입니다. 이 과정에 걸리는 시간을 따로 명시하지 않으면 기본적으로 수십분의 1초 정도 걸리는 것 같아요.
<!DOCTYPE html><html>
<head>
<title>a</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<style>
a{
display:block;
width:30px;
margin:20px;
border-radius:8px;
padding:20px 50px;
text-align:center;
background:green;
}
a:active{
background:indigo;
}
</style>
</head>
<body>
<a href="paris.jpg">link</a>
</body></html>
전환 속성을 통해 이 시간을 조정할 수 있습니다.
a:active{
background:indigo;
transition:3s;
}
독자는 실험을 수행하고 전환 값을 변경한 다음 avtive 선택기에 소요된 시간을 테스트할 수 있습니다.
ACTIVE example
<!DOCTYPE html><html>
<head>
<title>a</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<style>
p {
width:100px;
height:100px;
background:red;
transition: 5s;
}
p:active {
width:300px;
height:300px;
transition:3s;
}
</style>
</head>
<body>
<p></p>
</body></html>전환이 두 개 있다는 것은 전환이 두 개 있다는 뜻입니다.
첫 번째 전환은 활성 선택기를 활성화하는 것입니다. 이때 p:avtive의 전환이 작동합니다.
두 번째 전환은 마우스를 놓으면 이미지 크기가 정상으로 돌아옵니다. 이때 p의 전환이 적용됩니다.
독자가 p 에서만 전환을 설정하는 경우 선택기의 전환 시간은 기본적으로 p 의 전환으로 설정됩니다.
위 내용은 CSS :active selector의 예제 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.