悬停文本辅助
悬停文本辅助
提问于 2022-08-25 01:11:54
<div class="col-md-4">
<div class="top-bar-right">
<div class="social">
<a href="">
<img src="img/member_login1.png" height="40" width="40" >
</a>
</div>当一个人在LogIn图像上盘旋时，我试图显示标题为“member_login”的文本
回答 3
Stack Overflow用户
发布于 2022-08-25 01:23:33
用我的代码这可能有帮助..。
body{
background-color: #000;
}
.container{
display: flex;
justify-content: space-around;
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
figure{
width: 5rem;
height: 5rem;
clip-path: circle(50% at 50% 50%);
cursor: pointer;
position: relative;
}
img {
width: 100%;
height: 100%;
transform: scale(0.75);
transition: all 0.4s ease;
}
figcaption{
color: white;
font-size: 0.9rem;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
transition: all 0.6s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -40%);
}
figure:hover img{
transform: scale(0.5);
filter: blur(4px) brightness(70%);
}
figure:hover figcaption{
opacity: 1;
transform: translate(-50%, -50%);
}<html>
<head>
<title>Membuat Efek Hover Pada Image Caption</title>
</head>
<body>
<div class="container">
<figure>
<img src="https://www.inpows.com/media/2020/01/cropped-Logo-Inpows-2.png">
<figcaption>
Login
</figcaption>
</figure>
</div>
</body>
</html>
Stack Overflow用户
发布于 2022-08-25 01:20:22
您所需要的只是title属性！
<div class="col-md-4">
<div class="top-bar-right">
<div class="social">
<a href="">
<img
src="https://www.nasa.gov/images/content/296673main_scn1-226.jpg"
title="Hover to see me!" >
</a>
</div>
</div>
</div>
Stack Overflow用户
发布于 2022-08-25 01:25:21
如果您希望对悬停文本的样式有更多的控制，请使用span或其他东西，并在前面的图像不被悬停时将其设置为display: none。
.social {
position: relative;
}
.tooltip {
position: absolute;
top: 2px;
left: 2px;
color: saddlebrown;
background-color: white;
padding: 2px;
z-index: 2;
}
img:not(:hover) + .tooltip:not(:hover) {
display: none;
}<div class="col-md-4">
<div class="top-bar-right">
<div class="social">
<a href="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/LotusBud0048a.jpg/420px-LotusBud0048a.jpg" height="40" width="40" >
<span class="tooltip">LogIn</span>
</a>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73480890
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号