더보기
.box:hover .box1{display: none;} => box에 hover했을 때 .box밑에 포함된 .box1 찾아서 display를 none
.box:hover .box2{display: block;} => box에 hover했을 때 box밑에 포함된 .box2 찾아서 display를 block
<!DOCTYPE html>
<html lang="en">
<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시 컨텐츠 교체 예제</title>
<style>
.box{width: 100px; height: 100px; border: 1px solid black;}
.box1{width: 100%; height: 100%; background:red;}
.box2{display: none; width: 100%; height: 100%; background:blue;}
.box:hover .box1{display: none;}
.box:hover .box2{display: block;}
</style>
</head>
<body>
<div class="box">
<div class="box1">박스1</div>
<div class="box2">박스2</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>이미지확대 예제</title>
<style>
.box{width: 200px; height: 200px; overflow: hidden;}
.box img{width: 200px; height: 200px; transition: transform 0.2s;}
.box:hover img{transform: scale(2,2); }
</style>
</head>
<body>
<!-- 가로 200px, 세로 200px 박스 안에 이미지를 넣어서 화면에 보이게 하세요.
단, 이미지 태그로 -->
<div class="box">
<img src="../image/greenshoes.jpg" alt="" class="img">
</div>
</body>
</html>'괴발개발 > Html+CSS' 카테고리의 다른 글
| CSS_두 상자 사이에 여백이 있는 분할하기(2가지 방법) (0) | 2021.06.16 |
|---|---|
| CSS_네이버뉴스기사(메인파트)따라하기(세로/가로) (0) | 2021.06.15 |
| CSS_투명도 opacity, rgba (0) | 2021.06.14 |
| CSS_반응형 페이지 (0) | 2021.06.13 |
| CSS_display, visibility, flex (0) | 2021.06.13 |