鼠标悬停图片上显示内容 ②
💖 老板,轻点~

<div class="container-img">
<img src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2021/11/20/141249_202824_1.gif" class="no-lity" width=100%>
<div class="text-show"><span button type="button" class="btn btn-dark">💖 老板,轻点~</span></div>
</div>

<!-------------鼠标悬停图片显示文字---------------->
<style>
.text-show {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.3s;
padding: 10px;
white-space: nowrap;
}

.container-img:hover .text-show { opacity: 1; } .container-img:not(:hover) .text-show { opacity: 0; } </style> <!-------------鼠标悬停图片显示文字---------------->