집 >웹 프론트엔드 >CSS 튜토리얼 >의사 클래스 호버를 사용하는 방법

의사 클래스 호버를 사용하는 방법

php中世界最好的语言원래의: 2018-03-21 16:20:482967검색

이번에는 의사 호버 사용법을 알려드리겠습니다. 의사 호버 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

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 중국어 웹사이트의 다른 관련 기사를 주목하세요!