반응형
html
<div class="hovertext" data-hover="표시내용">마우스를 올려보세요</div>
css
/* hoverText */
.hovertext {
position: relative;
border-bottom: 1px dotted black;
}
.hovertext:before {
content: attr(data-hover);
visibility: hidden;
opacity: 0;
width: max-content;
background-color: black;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 5px 5px;
transition: opacity 1s ease-in-out;
position: absolute;
z-index: 1;
left: 0;
top: 110%;
}
.hovertext:hover:before {
opacity: 1;
visibility: visible;
}
결과
See the Pen Untitled by noransmile (@noransmile) on CodePen.
표시내용을 바꾸고자 할때
$('.hovertext').attr("data-hover", "변경내용");'Javascript' 카테고리의 다른 글
cordova 에서 BLE 통신하기 (0) | 2023.06.22 |
---|---|
javascript 우클릭 방지 (0) | 2023.02.15 |
node 서버 exe파일로 배포 (0) | 2022.12.08 |
시리얼통신 (0) | 2022.11.29 |
cordova platform 재설치후 ajax 안되는 문제 (0) | 2022.06.09 |