20231210 TIL

요구사항

• keyword span에 마우스 오버하면, keyword에 background-color가 입혀지면서 description이 speech bubble로 등장했으면 좋겠어요.
• speech bubble은 위에 세모가 정중앙에 오는 형태였으면 좋겠어요.

Solution

1) Svelte

• hoveredKeyword라는 변수를 만들어주어, click 또는 mouseover의 event 발생 시, 값을 할당한다
• 값이 할당되면, class 'active'를 붙여준다 -> active 상태가 되면 speech-bubble을 노출시키는 것이 목표

let hoveredKeyword = null;

<div class="modal-keywords red">
  <span
    on:click={() => hoveredKeyword = keyword}
    on:mouseover={() => hoveredKeyword = keyword}
    on:mouseout={() => hoveredKeyword = null}
    class="red-span"
    class:active={hoveredKeyword === keyword}>
    #{keyword}&nbsp
    <div class="speech-bubble">
      {description}
    </div>
  </span>
</div>

2) CSS

• 우선 speech bubble 네모의 위치를 잡아준다.
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  가 핵심!

.speech-bubble {
  display: none;
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 9px;
  background-color: #0E0D0D;
  color: #FFF;
  border-radius: 5px;
  z-index: 1;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: -0.5px;
}

• 다음 코드는 css bubble 위에 세모를 정중앙에 위치시켜준다.

.speech-bubble::after {
  content: '';
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

• 다음 코드는 마우스 오버 시, 또는 class에 'active'가 추가 되었을 때 background-color을 입혀준다.

.modal-keywords .green-span:hover, .modal-keywords .green-span.active {
  background-color: rgba(96, 173, 124, 0.40);
}
.modal-keywords .red-span:hover, .modal-keywords .red-span.active {
  background-color: rgba(146, 0, 0, 0.40); 
}

• 다음 코드는 마우스 오버 시, 또는 class에 'active'가 추가 되었을 때 speech bubble을 등장시켜준다.

.modal-keywords span:hover .speech-bubble, .modal-keywords span.active .speech-bubble {
  display: block;
  width: 122px;
}