悬停时如何在图像上显示文本？
我将鼠标悬停在图像上时要显示说明。我已经以一种不太理想的方式做到了这一点，在这里使用了图像精灵和鼠标悬停：我希望它看起来像我的样子，但是使用真实文本而不是图像。
我尝试了几种不同的方法，但似乎无法弄清楚该怎么做。我正在尝试仅使用HTML和CSS进行操作，但不确定是否可行。
请随意在我的代码中四处浏览，我将粘贴我认为与之相关的内容。
HTML
div#projectlist {
width: 770px;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 40px;
}
div#buzzbutton {
display: block;
float: left;
margin: 2px;
background: url(content/assets/thumbnails/design/buzz_sprite.jpg) 0 0px no-repeat;
width: 150px;
height: 150px;
}
div#buzzbutton:hover {
background: url(content/assets/thumbnails/design/buzz_sprite.jpg);
width: 150px;
height: 150px;
background-position: 0 -150px;
}
div#slinksterbutton {
display: block;
float: left;
background: url(content/assets/thumbnails/design/slinkster_sprite.jpg) 0 0px no-repeat;
width: 150px;
height: 150px;
margin: 2px;
}
div#slinksterbutton:hover {
background: url(content/assets/thumbnails/design/slinkster_sprite.jpg);
width: 150px;
height: 150px;
background-position: 0 -150px;
}
<div id="projectlist">
<div id="buzzbutton">
<a href="buzz.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a>
</div>
<div id="slinksterbutton">
<a href="slinkster.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a>
</div>
</div>
这很简单。将图片和“出现在悬停时”说明包装在div中，图片的尺寸相同。然后，使用一些CSS，命令描述在悬停该div时显示。
/* quick reset */
* {
margin: 0;
padding: 0;
border: 0;
}
/* relevant styles */
.img__wrap {
position: relative;
height: 200px;
width: 257px;
}
.img__description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(29, 106, 154, 0.72);
color: #fff;
visibility: hidden;
opacity: 0;
/* transition effect. not necessary */
transition: opacity .2s, visibility .2s;
}
.img__wrap:hover .img__description {
visibility: visible;
opacity: 1;
}
<div class="img__wrap">
<img class="img__img" src="http://placehold.it/257x200.jpg" />
<p class="img__description">This image looks super neat.</p>
</div>
-
问题内容： 我试图当鼠标移到图像的左下方时出现一个小框。在该框内，将有一个指向其他页面的链接。 这有点类似于我想要的东西，但是盒子要更小并且不连接到图像的边框。 我已经尝试了一切，但找不到答案。而且我不想使用工具提示，更不用说我没有任何JavaScript知识了。我真的希望这是CSS。 问题答案： 这是在CSS3中使用伪元素。 HTML： CSS： 相反，这是使用jquery达到相同结果的一种方式
-
我正在使用这个WP主题，我正在努力调整代码，以便内容框中的标题和描述只在悬停时显示（此时它们总是显示，悬停只会使图像变暗）。 以下是相关代码（据我所知）： .home\u特色化\u post\u last{右边距：0；} .home\u特色\u post\u悬停{位置：绝对；顶部：0；左侧：0；宽度：100%；高度：100%；显示：块；文本装饰：无；边框半径：5px；} .home_特色_post
-
为什么当鼠标悬停在图像上时，文本不显示？如何在css中使用visibility属性获得文本的可见性 null null
-
我有这个样本： 链接 CODE超文本标记语言： 所有人都能清楚地理解错误所在，并能清楚地了解所有人的行为，包括发明者的行为，并能清楚地了解自己的真实性和准建筑风格。 代码CSS： 代码JS: 我希望div
-
我想绘制INS的收盘价如下，它的工作原理。然后我想在图形上悬停时添加光标。我跟随https://matplotlib.org/3.1.0/gallery/misc/cursor_demo_sgskip.html的演示，这就是我想要的。 但当我将这些行添加到代码中时，它显示值错误。最初我使用历元时间作为x轴，我认为这就是问题所在，所以我将历元时间转换为日期时间，但它仍然不起作用，并且什么也没有绘制。
-
我写了一个代码，我在GridView中显示图像，但现在我想在每个图像的底部显示文本。 我想这样展示我的网格: 但是像这样[还想为图像显示文本]： main.xml：