如何添加工具提示图像悬停与CSS [英] How to add tooltip to image on hover with CSS

问题描述

我有三张图片，在悬停时，它们的大小增加使用：悬停在CSS中。当用户将鼠标悬停在图片上时，我还想让一个工具提示出现在图片的描述中（我也应该能够定位工具提示）。

HTML

 < div class =bottle-container> 
< div class =click-to-top>< img src =image-1.pngalt =图片1/>工具提示文字< / div> 
< div class =click-to-topstyle =z-index：5;>< img src =image-2.pngalt =Image 2/><< ; / DIV> 
< div class =click-to-top last>< img src =image-3.pngalt =Image 3/>< / div> 
< / div> 
  

CSS

  container {
 max-width：600px; 
 margin：0 auto; 
 min-height：450px; 
} 
 
 div.click-to-top {
 display：inline-block; 
职位：亲属; 
 max-width：160px; 
} 
 
 div.click-to-top：hover {
 z-index：10; 
} 
 
 div.click-to-top img {
 -webkit-transition：all 0.8s; 
 moz-transition：全部0.8s; 
过渡：全部0.8s; 
 width：130px; 
} 
 
 div.click-to-top img：hover {
 width：140px; 
 z-index：10; 
} 
  

解决方案

a < span>< / span> ，并显示在父母：hover

CSS

  div。点击顶部跨度{display：none;位置：绝对;底部：0;左：0;正确：0;背景：＃333;颜色：#fff; } 
 div.click-to-top：hover span {display：block; } 
  

HTML

 < div class =click-to-top>< img src =http://lorempicsum.com/futurama/ 350/200/1alt =图片1/>< span>提示文字< / span>< / div>  
 
 $  nofollow>小提琴 
 
I have three images, on hover they increase in size using :hover in css. When a user hovers over the image I'd also like a tooltip to appear with a description of the image (I should also be able to position the tooltip).

HTML
<div class="bottle-container">
<div class="click-to-top"><img src="image-1.png" alt="Image 1" />Tooltip text</div>
<div class="click-to-top" style="z-index:5;"><img src="image-2.png" alt="Image 2" /></div>
<div class="click-to-top last"><img src="image-3.png" alt="Image 3" /></div>
</div>
CSS
container{
max-width:600px;
margin:0 auto;
min-height:450px;
}

div.click-to-top {
display:inline-block;
position:relative;
max-width:160px;
}

div.click-to-top:hover{
z-index:10;
}

div.click-to-top img{
-webkit-transition: all 0.8s;
moz-transition: all 0.8s;
transition: all 0.8s;
width:130px;
}

div.click-to-top img:hover{
width:140px;
z-index:10;
}

解决方案
You can wrap the text into a <span></span> and show it on parent :hover

  
CSS


div.click-to-top span {display: none; position: absolute; bottom: 0; left: 0; right: 0; background: #333; color: #fff; }
div.click-to-top:hover span {display: block; }



  
HTML


<div class="click-to-top"><img src="http://lorempicsum.com/futurama/350/200/1" alt="Image 1" /><span>Tooltip text</span></div>
Fiddle

                        
这篇关于如何添加工具提示图像悬停与CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！