仅使用 CSS 悬停时显示文本

Posted 2023-03-06

【中文标题】仅使用 CSS 悬停时显示文本

【英文标题】：Display text when hover only using CSS

【发布时间】：2017-08-13 06:54:51

【问题描述】：

什么都没有

悬停时

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

感谢阅读。

【问题讨论】：

你试过什么没用？

你能发布你的代码吗

请向我们展示您的 html 和 CSS！ （也许读到这个：How to create a Minimal, Complete, and Verifiable example）

如果您不发布您的代码，任何人都无法帮助您！

好的。这并不完全正确，因为我知道如何为您提供帮助，但是您知道，如果您不发布代码，将来您将很快失去声誉。

【参考方案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;