本文介绍了如何使用 CSS 在悬停时向图像添加工具提示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
我有三张图片，在悬停时它们使用 :hover 在 css 中增加大小.当用户将鼠标悬停在图像上时，我还希望出现一个带有图像描述的工具提示(我也应该能够定位工具提示).
HTML
<div class="bottle-container"><div class="click-to-top"><img src="image-1.png" alt="Image 1"/>工具提示文本</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
容器{最大宽度:600px；边距:0 自动；最小高度:450px；}div.click-to-top {显示:内联块；位置:相对；最大宽度:160px；}div.click-to-top:悬停{z指数:10；}div.click-to-top img{-webkit-transition:全0.8s；moz-transition:全部为 0.8s；过渡:全0.8s；宽度:130px；}div.click-to-top img:hover{宽度:140px；z指数:10；} 解决方案
您可以将文本包装到 :hover
CSS
div.click-to-top span {显示:无；位置:绝对；底部:0；左:0；右:0；背景:#333；颜色:#fff;}div.click-to-top:hover span {显示:块；}<块引用>
HTML
<div class="click-to-top"><img src="http://lorempicsum.com/futurama/350/200/1"alt="图像 1";/><span>工具提示文本</span></div>小提琴
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 在悬停时向图像添加工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！