如何徘徊时

Question

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

嗨添加文字，我的问题是关于在IMG徘徊时添加添加图标和文字。 当它悬停时显示灰色，但我希望它也显示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

有两种方法来实现：

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元素（我用 “hoverable”）。

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

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

Answer 2

您可以使用JavaScript或一些CSS技巧为。 css技巧 - 您可以提供一些包含您的愿望设计的div。并将其隐藏起来，然后在img徘徊时显示它。 javacript - 与css相同，但用js编写的代码哈哈:)。

Answer 3

你可以使用jQuery做类似下面的例子：

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

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

); 
}); 

Answer 4

正如@约翰约瑟夫提到的，这可以很容易地使用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

你试图做这样的事情（见与字幕悬停）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并找到了不少很好的例子。