[CSS] 특정 요소에 마우스 올렸을 때 변화 주기.

목표

:hover 이벤트에 대해 알기

 

특성

마우스를 올릴 요소를 A, 주고싶은 변화를 B 라고 칭했을 때.

A:hover {B;} 형식으로 CSS를 작성해주면 됩니다.

 

학습

1) HTML 마크업

저는 각 텍스트에 마우스를 올렸을때 (hover 했을 때) 해당 글씨대로 색깔을 변경해보려고 합니다.

<div>
    <ul>
        <li class="red">빨간색</li>
        <li class="blue">파란색</li>
        <li class="bnh">검정색 배경, 하얀색 글씨</li>
    </ul>
</div>

2) CSS

그리고 무쟈게 간단한 CSS

.red:hover{color:red;}
.blue:hover{color:blue;}
.bnh:hover{color:white; background:black;}

 

결과