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

Question

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

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

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>

Answer 1

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

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

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

 );
});

Answer 2

你可以使用javascript或一些css技巧。 css技巧 - 你可以提供一些包含你的欲望设计的div。并将它隐藏起来，然后在img徘徊时显示它。 javacript - 和css一样，但用js写的代码哈哈：）。

Answer 3

您是否正在尝试执行此类操作（请参见悬停时使用标题）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上轻松搜索图片悬停标题，并找到一些不错的例子。

Answer 4

正如@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;
}

Answer 5

有两种方法可以实现这一目标：

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

请参阅This Fiddle

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

其次，添加一个只显示这些元素的CSS规则:hover - ed Learn more about the :hover pseudo-class here

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

2。 HTML和CSS以及JQuery

请参阅This Other Fiddle

仍然使用一个独特的类添加您的HTML元素（我使用＆＃34;可以恢复＆＃34;）。

默认情况下，仍设置CSS以隐藏这些元素。 visibility:hidden;或display:none;

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

如何在悬停时添加文本

5 个答案:

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

2。 HTML和CSS以及JQuery