[웹 UI 개발] 이미지 리스트 - 6 / 마우스 오버 시 버튼 노출

[웹 UI 개발] 이미지 리스트 - 6 / 마우스 오버 시 버튼 노출
/category/%EA%B3%B5%EB%B6%80/%EC%9B%B9%20UI%20%EA%B0%9C%EB%B0%9C

2023. 3. 22. 15:13

이미지에 마우스를 올려 놓을 때 특정 버튼이 노출되는 동작을 구현하는 방법을 예제를 통해 알아본다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>아이콘 상태 변경</title>
        <link rel="stylesheet" href="css/mouse_over.css">
    </head>
    <body>
        <div class="box test1">
            <a href="#" class="img_link">
                <img src="https://play-lh.googleusercontent.com/kzI2O-gQwiQK5XW9h6r5CJ-RUsftWxfynntkU2zicuQSL4YVQIS_NpLjomFT1Qk2yISa=w240-h480-rw" width="100" height="100" alt="">
                <span class="alert">99</span>
            </a>
            <a href="#" class="del_link">x</a>
        </div>

        <div class="box test2">
            <a href="#" class="img_link">
                <img src="https://play-lh.googleusercontent.com/kzI2O-gQwiQK5XW9h6r5CJ-RUsftWxfynntkU2zicuQSL4YVQIS_NpLjomFT1Qk2yISa=w240-h480-rw" width="100" height="100" alt="">
                <span class="alert">99</span>
            </a>
            <a href="#" class="del_link">x</a>
        </div>
    </body>
</html>

.box {
    position: relative;
    width: 100px;
    height: 100px;
}

.box + .box {
    margin-top: 30px;
}

.img_link {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
}

.alert {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 0 10px;
    font-size: 12px;
    line-height: 18px;
    color: #fff;
    background-color: rgba(255, 0, 0, 0.5);
}

.del_link {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px 10px;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.5);
}

.test1 .img_link:hover + .del_link {
    display: block;
}

.test2:hover > .del_link {
    display: block;
}

alert의 position을 absolute로 적용시키기 위해 img_link의 position을 relative로,

del_link의 position을 absolute로 적용시키기 위해 box의 postion을 relative로 수정한다.

del_link의 display는 none으로 적용시켜서 평소에는 보이지 않도록 한다.

".test1 .img_link:hover + .del_link {display: block;}"와 ".test2:hover > .del_link {display: block;}"는 두 코드 다 동작이 동일한데 약간의 차이가 있다.

첫번째 코드의 경우 이미지에 마우스를 오버하면 del_link가 보이는데 이 del_link에 마우스를 가져다 대면 del_link가 사라진다. 이는 :hover가 img_link에 있어서 그런 것인데, del_link에 마우스를 가져다 대면(del_link:hover가 된다고 생각) img_link에 hover가 되지 않은 상태로 판단해 del_link가 사라지는 것(display: none으로 돌아감)이다.

두번째 코드처럼 <div> 자체에 hover를 걸어주면 위의 코드의 문제가 발생하지 않는다.

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/web344

웹 UI 개발

부스트코스 무료 강의

www.boostcourse.org

'공부 > 웹 UI 개발' 카테고리의 다른 글

[웹 UI 개발] 표 - 0 (0)	2023.03.23
[웹 UI 개발] 이미지 리스트 - 7 / 이미지 리스트 추가 기능 제작 (0)	2023.03.23
[웹 UI 개발] 이미지 리스트 - 5 / 아이콘 상태 변경 (0)	2023.03.22
[웹 UI 개발] 이미지 리스트 - 4 / 이미지 리스트 제작 (0)	2023.03.22
[웹 UI 개발] 이미지 리스트 - 3 / 이미지 액자 효과 (0)	2023.03.22

김철용 기록소

CATEGORIES