의사 클래스 호버를 사용하는 방법
- php中世界最好的语言원래의
- 2018-03-21 16:20:482902검색
이번에는 의사 호버 사용법을 알려드리겠습니다. 의사 호버 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.
hover 의사 클래스에 의해 추가된 animation 효과로 인해 마우스가 요소 위에 놓일 때만 트리거되며, 마우스가 떠나면 효과가 중단되어 매우 뻣뻣해 보입니다.
대부분의 사람들의 아이디어는 js의 onmouseover 및 onmouseleave 이벤트를 사용하여 애니메이션 효과를 얻는 것입니다. 사실 그렇게 번거로울 필요는 없습니다. CSS3는 이러한 문제를 해결하는 데 도움이 될 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>离开时效果生硬</title>
<style type="text/css">
p{
width: 100px;
height: 100px;
border:1px solid;
margin:0px auto;
margin-top: 200px;
}
p:hover{
transform: scale(2);
transition: all 1s linear;
}
</style>
</head>
<body>
<p></p>
</body>
</html>
p 요소는 :hover 의사 클래스가 트리거될 때만 p 요소에 추가될 수 있기 때문입니다.
마우스가 p 요소를 벗어나면 :hover 의사 클래스가 더 이상 적용되지 않으며 hover에 작성된 애니메이션 효과가 즉시 사라집니다.
이때, 중단된 애니메이션 효과를 이어가려면 원본 요소에 동일한 전환 효과를 작성해야 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单解决</title>
<style type="text/css">
p{
width: 100px;
height: 100px;
border:1px solid;
margin:0px auto;
margin-top: 200px;
/* 在原本元素上再加一个transition */
transition: all 1s linear;
}
p:hover{
transform: scale(2);
transition: all 1s linear;
}
</style>
</head>
<body>
<p></p>
</body>
</html>
이때 마우스가 요소를 떠나도 변경되지 않고 돌아옵니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
href와 src, link와 @import의 차이점은 무엇입니까
CSS의 절대 위치 지정은 모든 해상도와 어떻게 호환되나요?
위 내용은 의사 클래스 호버를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.