[CSS] 마우스 커서 속성 (hover, active, enabled, disabled)

CSS

by 웹시코기 2024. 6. 9. 22:07

hover, active

<head>
    <style>
        h1:hover {color:red
        h1:active{color:blue;}
    </style>
</head>
<body>
    <h1>마우스 속성</h1>
</body>

커서가 요소 위에 없는 기본 상태

hover : 마우스 커서가 요소 위로 움직였을 때의 상태

h1:hover {color : red;} 이 코드에 따르면 마우스 커서가 h1 요소 위로 이동하면 글자 색상이 빨간색으로 바뀝니다.

active : 요소가 클릭된 상태

h1:active {color : blue;} 이 코드에 따르면, h1 요소를 클릭하면 글자 색상이 파란색으로 바뀝니다.

enabled, disabled

<head>
    <style>
        input:enabled {background-color:yellow;}
        input:disabled {background-color:gray;}
        input:focus {background-color:orange;}
    </style>
</head>
<body>
    <h2>Enabled</h2>
    <input type="text" />
    <h2>Disabled</h2>
    <input disabled="disabled" />
</body>