Web

[HTML] 마우스 올렸을 때 설명 텍스트 띄우기 (alt 말고!!)

elisom 2021. 11. 25. (Last updated:

 

마우스를 올려놓으면 설명하는 텍스트가 뜨는 경우가 있다. (많이)

 

html을 공부해보신 분이라면 아시듯이 alt 속성을 통해

<img> <input> <area>에서 해당 기능을 구현할 수 있다.

 

그렇다면...!! alt가 안되는 <div>나 다른 태그들은...?!

 

<div class="elisom-floating-btn">
  <a id="MOVE_TOP_BTN" href="#" title="Move to the top ⬆️">
    <img src="https://tistory1.daumcdn.net/tistory/3899384/skin/images/up-arrow.png"/>
  </a>
  
  <a id="GOTO_HOME_BTN" href="https://elisom.tistory.com/" title="Go to Home 🏠">
    <img src="https://tistory1.daumcdn.net/tistory/3899384/skin/images/home.png"/>
  </a>
</div>

 

위의 코드와 같이 alt 말고 'title'이라는 속성으로 마우스를 올렸을 때 뜨는 글을 정할 수 있다 ~~