如何在悬停时添加文本

Question

https://codepen.io/dhanushbadge/pen/uJkcq

嗨，我的问题是关于在将鼠标悬停在 img 上时添加添加图标和文本。悬停时它显示灰色，但我希望它也显示 3 个图标和顶部的文本。悬停时，我似乎无法在圆圈内添加文字。原始代码在链接中请帮助pppppppp

 html {
  font-size:62.5%;
}
body {
  margin:0;
  font-size:1.4rem;
  font-family:arial;
  background-color:#ddd;
}
img {
  border:0;
  width:100%;
  height:100%;
}
#team {
  max-width:96rem;
  width:100%;
  min-height:200px;
  height:auto;
  margin:0 auto;
  background-color:white;
  box-sizing:border-box;
  padding:0;
  display:-webkit-flex;
  display:flex;
  -webkit-align-items:center;
  align-items:center;
  -webkit-justify-content:center;
  justify-content:center;
  -webkit-flex-direction:row;
  flex-direction:row;
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;
  -webkit-align-content:flex-end;
  align-content:flex-end;
}
figure {
  width:12.5rem;
  height:12.5rem;
  display:block;
  margin:0.5rem 1rem 4rem 0.5rem;
  padding:0;
  box-sizing:content-box;
  color:black;
}
figure img {
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
}
#team figure img {
  -webkit-transition:opacity 0.26s ease-out;
  -moz-transition:opacity 0.26s ease-out;
  -ms-transition:opacity 0.26s ease-out;
  -o-transition:opacity 0.26s ease-out;
  transition:opacity 0.26s ease-out;


}
#team:hover img, #team:active img {
  opacity:1;
}
#team:hover img:hover, #team:active img:active   {
  opacity:0.3;

}
figcaption {
  font-size:1.2rem;
  text-align:center;
}

 <div id="team">
  <figure><img src="http://500px.com/graphics/pages/team/squares/oleg.jpg"><figcaption>Oleg Gutsol</figcaption></figure>
  <figure><img             src="http://500px.com/graphics/pages/team/squares/evgeny.jpg"><figcaption>Evgeny Tchebotarev</figcaption></figure>
  <figure><img src="http://500px.com/graphics/pages/team/squares/dustin.jpg"><figcaption>Dustin Plett</figcaption></figure>
  <figure><img src="http://500px.com/graphics/pages/team/squares/adam.jpg"><figcaption>Adam Shutsa</figcaption></figure>
  <figure><img src="http://500px.com/graphics/pages/team/squares/roxy.jpg"><figcaption>Roxy Keshavarznia</figcaption></figure>
  <figure><img src="http://500px.com/graphics/pages/team/squares/eric.jpg"><figcaption>Eric Akaoka</figcaption></figure>
  <figure><img src="http://500px.com/graphics/pages/team/squares/david.jpg"><figcaption>David Charlec</figcaption></figure>

</div>

原文由 Laura Q 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有两种方法可以做到这一点：

1. 纯 HTML 和 CSS（没有 Javascript 或 JQuery）

看到 这个小提琴

首先，将文本和图标添加到 HTML 中。看起来您可以将它们添加到 <figure> 块中。

其次，添加一个 CSS 规则，仅当图形为 :hover 时才显示这些元素。在此处 了解有关 :hover 伪类的更多信息

第三，调整元素的 position 或 margins 让它们显示在你想要的地方。

2. HTML 和 CSS 和 JQuery

看到 这个其他小提琴

仍然添加具有唯一类的 HTML 元素（我使用“可悬停”）。

仍然将您的 CSS 设置为默认隐藏这些元素。 visibility:hidden; 或 display:none;

然后添加一些 JQuery，它 .mouseover() 和 .mouseout() 事件以切换元素的可见性或显示。

原文由 Chiperific 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您是否正在尝试做这样的事情（请参阅带标题的鼠标悬停） https://codepen.io/kw7oe/pen/mPeepv

为此，您需要这样构造您的 html

 <figure>
  <img src="" alt="">
  <span class="caption">{content}</span>
</figure>

本例中的 span 类默认不透明度为 0，悬停时不透明度变为 1。使用一些 css 过渡，我们得到了平滑的出现和消失效果。在这种情况下，图形将具有相对定位，以便跨度可以绝对悬停在整个事物上。

 figure { position: relative; display: block; overflow: hidden; }
figure img { max-width: 100% }
figure .caption { position: absolute; display: block; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; transition: all .2s ease-in-out }
figure:hover .caption { opacity: 1; }

您可以在 codepen 上轻松搜索 图像悬停标题 并找到很多不错的示例。

原文由 Sazzad Hossain 发布，翻译遵循 CC BY-SA 3.0 许可协议