CSS_hover

song·2023년 7월 24일

CSS_web1

목록 보기

13/18

마우스오버 : hover

해당 요소에 마우스가 올라가면 hover
(부모 자손 관계 확실히 지켜야함)
```
.pink:hover > .blue{ display: block; }
```
-> pink에 마우스를 올리면 자손중에 (> 이 표시 뜻이 자식이라는 뜻임) 클래스가 blue인 교소를 선택해서 보이게 해라. 라는 뜻.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body{margin: 0;}
        .wrap{
            width: 500px;
            height: 500px;
            background-color: pink;

            overflow: hidden;
        }
        .pink{
            width: 50%;
            height: 50%;
            border: 1px solid;
            box-sizing: border-box;

            position: relative;

            float: left;
        }
        .blue{
            width: 50%;
            height: 50%;
            background-color: blue;

            position: absolute;
            display: none;
        }
        .blue1{
            top:0;
            left: 0;
        }
        .blue2{
            top:0;
            right: 0;
        }
        .blue3{
            bottom: 0;
            left: 0;
        }
        .blue4{
            bottom: 0;
            right: 0;
        }
        .pink:hover .blue{display: block;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="pink">
            <div class="blue blue1"></div>
        </div>
        <div class="pink">
            <div class="blue blue2"></div>
        </div>
        <div class="pink">
            <div class="blue blue3"></div>
        </div>
        <div class="pink">
            <div class="blue blue4"></div>
        </div>
    </div>
</body>
</html>

.pink:hover .blue{display: block;}
호버가 되고 있는 pink에 있는 자식인 blue를 보이게 해라
blue1234를 입력 안해도 자식인 blue를 인식함.

'>' 를 쓰는 경우 : 자식만 건들이고 싶을 때
'>' 를 안쓰는 경우 : 자식뿐만 아니라 자손들도 다 건들일 수 있음
background-image를 놓고 position으로 영역을 위에 만들면 image는 hover가 안된다.
position이 위에 있기 때문에 position으로 만든 영역만 hover가 된다.
만약 image를 hover하고 싶으면
pointer-events: none;
(마우스포인터로 할 수 있는 모든 행위(hover, 클릭, 드래그, 휠 다)를 못하게 하는 것.)
를 position영역에 넣으면 background-image를 선택할 수 있다.
hover의 덩어리는 많이 만들지 않는 것이 좋다.
하나의 이미지에 hover는 최대한 한덩어리만 만드는 것이 좋다.
왜냐하면 할 것이 많아지면 hover덩어리가 많아져서 관리하기 힘들기 때문이다.

song

계속 나아가기

이전 포스트

CSS_position

다음 포스트

CSS_구조(시멘틱태그)

1개의 댓글

happy

2023년 7월 24일

많은 도움이 되었습니다, 감사합니다.

답글 달기