마우스 오버/hover
마우스 커서를 올렸을때(hover) effect를 주는 방법
지난 포스팅에서 다뤘던 opacity 속성과 함께 예문 작성)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.photo {
opacity: 0.5; /* 투명도 속성 - 반 투명도 */
}
/* 이미지에 마우스가 올라갔을 때 디자인 적용 */
.photo:hover {
opacity: 1;
}
</style>
</head>
<body>
<img class="photo" src="images/img.jpg" alt="튤립 이미지">
</body>
</html>
마우스 커서가 안 보이는데, 커서를 올릴 때마다 이미지가 변화되는 것을 볼 수 있다.
'Front-End > CSS' 카테고리의 다른 글
| [CSS] opacity 속성(요소를 투명하게 만드는 속성) (0) | 2021.11.10 |
|---|---|
| [CSS] 브라우저 업체별 접두어(vendor prefix) (0) | 2021.11.10 |
| [CSS] list-style-type 속성 (0) | 2021.11.10 |
| [CSS] float 속성 (0) | 2021.10.31 |
| [CSS] shadow 속성 (text-shadow, box-shadow) (0) | 2021.10.31 |
댓글