对于我的网站，我想使用悬停功能，当鼠标悬停在图像上时显示文本。 因为我想实现多张图片，所以我使用了一个表格，其中每个 td 代表一个图像。
我的问题是，一旦悬停，覆盖层就会显示，但没有显示文本
我是 html 和 css 的初学者，因此，如果我还有什么可以做的不同且更有效的事情，请随时告诉我。
.container {
position: relative;
width: 50%;
}
.moon {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 300px;
width: 300px;
opacity: 0;
transition: .5s ease;
background-color: white;
}
.container:hover {
opacity: 0.6;
filter: alpha(opacity=10);
}
.text {
color: blue;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.mr {
position: relative;
float: left;
width: 300px;
padding-left: 40px;
}
.mr:hover {
opacity: 0.6;
filter: alpha(opacity=10);
}
.plant {
position: relative;
width: 300px;
padding-left: 40px;
padding-right: 120px;
float: left;
}
.plant:hover {
opacity: 0.6;
filter: alpha(opacity=10);
}
.karteone {
position: relative;
width: 300px;
padding-top: 40px;
}
.karteone:hover {
opacity: 0.6;
filter: alpha(opacity=10);
}
.kartetwo {
position: relative;
float: left;
width: 300px;
padding-top: 39.5px;
padding-left: 40px;
}
.kartetwo:hover {
opacity: 0.6;
filter: alpha(opacity=10);
}<body>
<div class="Arbeitsprobe">
<h2 class="myworksample">My Work Samples.</h2>
<h5>Graphic Illustrator</h5>
<center>
<table>
<tr>
<td>
<div class="container">
<img class="moon" src="images/moon.png" alt="moon">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</td>
<td><img class="mr" src="images/mr.me.png" alt="mr"></td>
<td><img class="plant" src="images/plant planet.png" alt="plant"></td>
</tr>
</table>
</center>
</div>
</body>最佳答案
您可以使用 css 中的工具提示类。这将在悬停时显示工具提示文本。
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
关于html - 悬停时不会显示文字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70304278/