13. Hover, Active, Focus

상호 작용을 위한 가상클래스

:hover

사용자가 마우스를 요소 위에 올렸을 때 적용됩니다. 스마트폰이나 패드 류의 터치스크린 기기에서는 사용자의 손가락이 호버되는 시점을 알 수 없기 때문에 모바일 기기가 많아지면서 점점 사용 빈도가 줄어드는 기능입니다.

:active

사용자가 요소를 실행할 때(버튼을 누르거나 링크를 클릭할 때) 적용됩니다.

:focus

요소에 포커스가 있을 때 적용됩니다. 클릭할 수 있는 요소나 폼컨트롤(input, select 등등)과 같이 상호작용 할 수 있는 모든 요소에는 포커스가 가능합니다.


<!DOCTYPE html>
<html lang="ko">
<head>
    <title>버튼</title>
    <style>
        .btn {
            border: 4px solid palevioletred;
            border-radius: 4px;
            padding: 30px 60px;
            background: none;
            color: palevioletred;
            font-size: 32px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: all .3s;
        }

        .btn:hover {
            color: white;
            border: 4px solid firebrick;
        }

        .btn:before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: palevioletred;
            z-index: -1;
            border-radius: 100px 100px 0px 0px;
            height: 0px;
            transition: all .3s;
        }

        .btn:hover:before {
            height: 120px;
            background: firebrick;
        }

        .btn:active {
            background-color:#000;
        }

        .box {
            border:1px solid palevioletred;
            display:block;
            height:40px;
            margin-bottom:10px;
            padding:0 5px;
        }

        .box:focus {
            background-color:rgba(0,0,255,0.1);
        }

        .box:focus::placeholder {
            color:red;
            font-weight:600;
        }

    </style>
</head>
<body>
    <input type="text" class="box" placeholder="Click Here!">
	<button class="btn">Click Me!!</button>
</body>
</html>

좀 더 단순한 예제


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hover, active, focus</title>
    <style>
        .one {
            background: blueviolet;
            width: 100px;
            height: 100px;
            transition: all 2s;
        }
        .one:hover {
            background:crimson;
            width: 200px;
            height: 200px;
        }
        .btn {
            border: 4px solid palevioletred;
            border-radius: 4px;
            padding: 30px 60px;
            background: none;
            color: palevioletred;
            font-size: 32px;
            transition: all .3s;
        }
        .btn:active {
            background-color: purple;
            color:white;
        }
        .box {
            transition: all .3s;
        }
        .box:focus {
            background: red;
            color: white;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <input type="text" class="box" placeholder="click here!">
    <button class="btn">Click Me!!</button>
</body>
</html>