仅使用 CSS 悬停时显示文本答案

【问题标题】：Display text when hover only using CSS仅使用 CSS 悬停时显示文本
【发布时间】：2017-08-13 06:54:51
【问题描述】：

什么都没有

悬停时

如何仅使用 css 在图像中间显示文本。

感谢阅读。

【问题讨论】：

你试过什么没用？
你能发布你的代码吗
请向我们展示您的 HTML 和 CSS！（也许读到这个：How to create a Minimal, Complete, and Verifiable example）
如果您不发布您的代码，任何人都无法帮助您！
好的。这并不完全正确，因为我知道如何为您提供帮助，但是您知道，如果您不发布代码，将来您将很快失去声誉。

标签： html css image hover display

【解决方案1】：

HTML：

<div id="wrapper">
    <img src="http://placehold.it/300x200" class="hover" />
    <p class="text">text</p>
</div>

CSS：

#wrapper .text { 位置：相对；底部：30px；左：0px；可见性：隐藏； } #wrapper：悬停 .text { 可见性：可见； }

[Demo][1]

【讨论】：

【解决方案2】：

CSS：

a.transparent {
width: 200px;
height: 200px;
background: url("whatever.jpg");
display: block;
text-decoration: none; 
}

a.transparent span span{
color:transparent;
}
a:hover.transparent span{
display:block;
width: 200px;
height: 200px;
background:rgba(255,255,255,0.5);
}
a:hover.transparent span span{
display:block;
padding-top: 33%;
text-align: center;
font-size: 1.5em;
line-height: 1em;
background:transparent;
color: #000000;
}

HTML：

<a href="#" class="transparent"><span><span>Rocket<br />League</span></span></a>

【讨论】：

【解决方案3】：

你可以试试这个。它已经过全面测试，希望对您有所帮助。

HTML：

<div id="container">
    <img src="https://i.stack.imgur.com/8ybfu.png" class="hover" />
    <p class="title">Rocket<br> League</p>
</div>

CSS：

#container {
  position: relative;
  width:300px;
}
.title {
  position:absolute;
  left:50%;
  margin-left:-40px;
  margin-top: -40px;
  right:0;
  top:50%;
  bottom:0;
  font-size: 22px;
  color: red;
  display:none;
}
#container:hover .title {
  display:block;
}

【讨论】：