鼠标悬停图片上显示内容 ②
💖 老板,轻点~
<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> <!-------------鼠标悬停图片显示文字---------------->