脚本宝典收集整理的这篇文章主要介绍了php – 当鼠标悬停在图像上时,如何在图像上显示缩放按钮，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
<a href="news_image/<?PHP echo $getrs['image']; ?>"><img src="images/zoom.jpg" width="40" height="40" border="0" style="background:URL(http://news_image/<?PHP echo $getrs['image']; ?>) ;" /></a>
但这里的主要问题是如何设置背景图像的大小以及如何仅在鼠标悬停时显示zoom.jpg,否则不会.当鼠标悬停背景图像时,如何将zoom.jpg放在背景图像的右下角.
我以前曾问过这个问题,但当时我并不具体,但现在我试图具体了.
请帮我解决这个问题.
谢谢
Somdeb
HTML：
<a href="#" class="zoom"> <span></span> <img src="/path/to/image.jpg" /> </a>
CSS：
.zoom {
border: 5px solid #000;
display: inline-block;
posITion: relative;
}
.zoom span {
background: url(http://i.imgur.COM/T7yFo.png) no-rePEat;
bottom: 0;
display: block;
height: 20px;
position: absolute;
right: 0;
width: 20px;
}
img {
height: auto;
max-width: 100%;
}
如果您只想显示放大镜：悬停,请更改CSS以反映：
.zoom span {
...
display: none;
...
}
.zoom:hover span {
display: block;
right: center;
top: center;
}
这会将缩放图像放在图像的中间位置：悬停.
作为额外的好处,您可以将鼠标光标更改为自定义图像(例如放大镜),进一步向用户建议可以放大图像.
.zoom img:hover {
cursor: url(http://i.imgur.com/T7yFo.png),-moz-zoom-in;
}
以上是脚本宝典为你收集整理的php – 当鼠标悬停在图像上时,如何在图像上显示缩放按钮全部内容，希望文章能够帮你解决php – 当鼠标悬停在图像上时,如何在图像上显示缩放按钮所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。