我有三个图像,悬停时它们会使用 css 中的 :hover 增加大小。当用户将鼠标悬停在图像上时,我还希望出现一个带有图像描述的工具提示(我还应该能够定位工具提示)。
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;
}
您可以将文本包装成<span></span>
并将其显示在家长身上: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
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)