【问题标题】：How to add text when hovering悬停时如何添加文字
【发布时间】：2023-03-25 10:51:01
【问题描述】：

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>

【问题讨论】：

您似乎正在尝试使用 CSS 解决 javascript 问题，该问题添加元素的能力有限。这应该让您朝着正确的方向开始：stackoverflow.com/questions/14149360/text-on-image-mouseover

标签： html css image

【解决方案1】：

您可以使用 jquery 来执行此操作，如下例所示：

$("#team img").each(function(){

  $(this).hover(
    function() {
      $(this).text("worked");
    },
    function() {
      $(this).text("");
    }

 );
});

【讨论】：

只在 css 和 html 中怎么样 :(
但这也是正确的，如果正确请打勾。
另外，这很难设计，她提到想要将文本和图标放在顶部。
我们可以轻松做到这一点:)

【解决方案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 上轻松搜索 图片悬停标题 并找到不少不错的示例。

【讨论】：

【解决方案3】：

您可以为此使用 javascript 或一些 css 技巧。 CSS技巧 - 你可以提供一些包含你想要的设计的 div。并将其隐藏，然后在 img 悬停时显示。脚本 - 和 css 一样，但是代码是用 js 写的哈哈 :)。

【讨论】：

【解决方案4】：

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

1。纯 HTML 和 CSS（无 Javascript 或 JQuery）

见This Fiddle

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

其次，添加一个CSS规则，只在图形为:hover-edLearn more about the :hover pseudo-class here时显示这些元素

第三，调整元素的position 或margins，让它们显示在您想要的位置。

2。 HTML、CSS 和 JQuery

见This Other Fiddle

仍然为您的 HTML 元素添加一个独特的类（我使用了“hoverable”）。

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

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

【讨论】：

【解决方案5】：

正如@John Joseph 提到的，这可以使用 CSS 轻松实现。这是一个纯 CSS 方法。

HTML

<div class="image-container">
<div class="image-cover" style="display:none;">
      <img src="your_icon"/>
      <span> your_text </span>
    </div>
</div>

CSS

.image-container{
    background-image: url(your_image);
    position: relative;
}

.image-container:hover .image-cover{
    display:block;
}

.image-cover{
  position:absolute;
}

【讨论】：