hover시 tooltip이 나타나게(형제 선택자)

코드펜 바로가기

bGOVgzx

 

hover시 tooltip이 나타나는 코드

 

hover되는 txt에 css변경이 아닌

형제 선택자의 변경을 코드로 작성해 봤다.

 

<div class="box">
  <div class="txt">올려보세요</div>
  <span class="tooltip">툴팁입니다</span>
</div>

 

.box {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: #fffee8;
}
.txt {
  display:  flex;
  align-items: center;
  justify-contaent: center;
  width: 100px;
  height: 100px;
  background-color: #ffe380;
}
.tooltip {
  position: absloute;
  /* 위치는 원하는 곳으로 조절 */
  top: 0px;
  display: none;
}
.txt:hover + .tooltip {
  display: inline-block;
}

 

위와 같이 형제 선택자의 경우에는

선택자들을 + 로 묶어서 display를 변경해 준다.

 

---

hover 전

hover 후

 

 

.tooltip {
position: absolute;
bottom: 10px;
display: none;
background-color: #f4f6f7;
border: 1px solid #E5E5E5;
padding: 10px;
border-radious: 5px;
}
.txt:hover + .tooltip {
display: inline-block;
}

display: none으로 보이지 않게 처리 후
hover시에 display:block 처리로 노출 되게 진행