[JS] 헤더부분 아이콘에 마우스 올라갈때 안내바나오고 원모양 나오게하기

 
html

<!-- 로그인했을 경우 -->
<div class="userHeader_login">
    <!-- 알림 표시 -->
    <div class="icon">
        <img src="https://img.icons8.com/?size=100&id=3334&format=png&color=767676">
        <div class="login-hover-menu">
            <p>알림</p>
        </div>
    </div>
    <!-- 메시지 표시 -->
    <div class="icon">
        <img src="https://img.icons8.com/?size=100&id=37966&format=png&color=767676">
        <div class="login-hover-menu">
            <p>메시지</p>
        </div>
    </div>
    <!-- 프로필이미지 -->
    <a href="mypage.html">
        <img id="previewProfil" class="circular-img" 
            style="border:none; width:70px; height:70px;" 
            src="https://img.icons8.com/?size=100&id=115346&format=png&color=000000">
    </a>
</div>

 
 
스크립트

<script>
window.onload = function(){
    $(".icon").mouseover(function() {
        $(this).addClass('round');  // round 클래스 추가
    }).mouseout(function() {
        $(this).removeClass('round');  // round 클래스 제거
    });
}
</script>

 
 
css

.userHeader_login {
    display: flex;
    gap: 5px; /* 버튼 간의 간격 */
    /* margin-right: 1.5%; */
    align-items: center; /* 수직 중앙 정렬 */
}

.userHeader_login .icon {
    width: 3.5vw; /* 화면 너비의 3.5%에 해당하는 크기 */
    height: 3.5vw; /* 화면 너비의 3.5%에 해당하는 크기 */
    display: flex;
    justify-content: center; /* 수평 가운데 정렬 */
    align-items: center; /* 수직 가운데 정렬 */
}

.userHeader_login .icon.round {
    border-radius: 50%;
    background-color: #EEEEEE;
}

.userHeader_login .icon img {
    max-width: 100%; /* 이미지가 부모 div를 벗어나지 않도록 */
    max-height: 100%; /* 이미지가 부모 div를 벗어나지 않도록 */
    border-radius: 50%; /* 이미지도 원형으로 처리 */
}

/* 마우스 올라갔을때 알림, 메시지 박스 표시용 */
.userHeader_login .icon {
    position: relative; /* 자식 요소의 위치를 기준으로 설정하기 위해 relative 설정 */
}

.login-hover-menu {
    display: none;
    position: absolute;
    top: 110%; /* 아이콘 바로 아래에 위치하도록 설정 (아이콘의 100% 아래 + 약간의 간격) */
    left: 50%;
    transform: translateX(-50%); /* 가로 중앙 정렬 */
    color:white;
    background-color: #767676;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
    border-radius: 5px;
    z-index: 1;
    justify-content: center;
    align-items: center;
    text-align: center;
/*     width: 60px;
    height:20px; */
    width: 3vw; /* 화면 너비의 3%로 설정 */
    height: auto; /* 내용에 맞게 높이를 자동 설정 */
    font-size: 2vw;
    white-space: nowrap; /* 줄바꿈하지 않음 */
    overflow: hidden; /* 박스를 넘는 글자를 숨김 */
    text-overflow: ellipsis; /* 넘치는 텍스트에 말줄임표(...) 처리 */
}

.userHeader_login .icon:hover .login-hover-menu {
    display: block; /* 마우스가 icon 위에 올라가면 메뉴가 보이도록 설정 */
}

.login-hover-menu p {
    margin: 0;
    font-size: 16px;
    cursor: pointer;
}

body.dark-mode .login-hover-menu{
	background-color: white;
	color: #333333;
}

 
 

 

---

설명

window.onload = function() {
    $(".icon").mouseover(function() {
        $(this).addClass('round');  // 마우스 오버 시 round 클래스 추가
    }).mouseout(function() {
        $(this).removeClass('round');  // 마우스 아웃 시 round 클래스 제거
    });
}

 

• .icon 요소에 mouseover 이벤트: .icon 클래스에 속한 요소에 마우스를 올리면 round라는 CSS 클래스를 추가합니다.
  • addClass('round'): 마우스가 아이콘 위에 있을 때 round 클래스를 추가해 스타일을 적용합니다.
• .icon 요소에 mouseout 이벤트: 마우스가 아이콘을 벗어나면 round 클래스를 제거하여 원래 상태로 되돌립니다.
  • removeClass('round'): 마우스가 벗어나면 원형 효과와 배경색이 제거됩니다.

 

.userHeader_login {
    display: flex;
    gap: 5px; /* 아이콘 사이 간격 */
    align-items: center; /* 수직 중앙 정렬 */
}

 

• .userHeader_login: display: flex를 이용해 아이콘들을 가로로 배치하며, 각 아이콘 사이에 5px의 간격을 설정합니다. 또한, 아이콘들을 수직으로 중앙 정렬(align-items: center)합니다.

 

.userHeader_login .icon {
    width: 3.5vw;  /* 화면 너비의 3.5% 크기 */
    height: 3.5vw; /* 화면 너비의 3.5% 크기 */
    display: flex;
    justify-content: center; /* 수평 가운데 정렬 */
    align-items: center; /* 수직 가운데 정렬 */
}

• .icon 클래스는 각 아이콘의 컨테이너 역할을 하며, 아이콘의 크기를 화면 너비에 맞춰 조정(3.5vw)하고, 아이콘 안의 이미지를 중앙에 배치합니다.

 

.userHeader_login .icon.round {
    border-radius: 50%; /* 원형 효과 */
    background-color: #EEEEEE; /* 연한 회색 배경색 */
}

• .icon.round: 마우스를 올렸을 때 추가되는 클래스입니다. 이 클래스는 border-radius: 50%를 적용해 아이콘을 원형으로 만들고, 배경색을 연한 회색(#EEEEEE)으로 변경합니다.

 

.userHeader_login .icon img {
    max-width: 100%;  /* 이미지가 컨테이너를 넘지 않도록 */
    max-height: 100%; /* 이미지가 컨테이너를 넘지 않도록 */
    border-radius: 50%; /* 이미지를 원형으로 처리 */
}

• .icon img: 아이콘 안의 이미지를 컨테이너 크기에 맞춰 조절합니다. border-radius: 50%로 이미지를 원형으로 만들어 아이콘이 원형일 때도 자연스럽게 보이도록 합니다.

 

.userHeader_login .icon {
    position: relative;
}

• .icon에 position: relative를 설정하여 자식 요소인 login-hover-menu의 위치를 조정할 때 이 요소를 기준으로 설정할 수 있게 합니다.

 
 

.login-hover-menu {
    display: none;
    position: absolute;
    top: 110%; /* 아이콘 바로 아래에 위치하도록 설정 (아이콘의 100% 아래 + 약간의 간격) */
    left: 50%;
    transform: translateX(-50%); /* 가로 중앙 정렬 */
    color:white;
    background-color: #767676;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
    border-radius: 5px;
    z-index: 1;
    justify-content: center;
    align-items: center;
    text-align: center;
/*     width: 60px;
    height:20px; */
    width: 3vw; /* 화면 너비의 3%로 설정 */
    height: auto; /* 내용에 맞게 높이를 자동 설정 */
    font-size: 2vw;
    white-space: nowrap; /* 줄바꿈하지 않음 */
    overflow: hidden; /* 박스를 넘는 글자를 숨김 */
    text-overflow: ellipsis; /* 넘치는 텍스트에 말줄임표(...) 처리 */
}

.userHeader_login .icon:hover .login-hover-menu {
    display: block; /* 마우스가 icon 위에 올라가면 메뉴가 보이도록 설정 */
}

.login-hover-menu p {
    margin: 0;
    font-size: 16px;
    cursor: pointer;
}

 
 

• .login-hover-menu는 기본적으로 화면에 표시되지 않도록 display: none으로 설정되어 있습니다.
• position: absolute: .login-hover-menu의 위치를 부모 요소(.icon)를 기준으로 절대 위치로 설정합니다.
• top: 110%: 메뉴가 아이콘 바로 아래에 나타나도록 설정합니다. 100%는 아이콘 높이만큼 아래에 배치되고, 여기에 10% 더해 약간의 간격이 생깁니다.
• left: 50% 및 transform: translateX(-50%): 메뉴가 부모 요소의 가로 중앙에 위치하도록 설정합니다.