php – 当鼠标悬停在图像上时,如何在图像上显示缩放按钮

发布时间：2020-12-13 22:33:23 所属栏目：PHP教程来源：网络整理

导读：我想知道当鼠标悬停在html上时,如何在html图像上显示缩放按钮. ?到现在为止我试过这个 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

我想知道当鼠标悬停在html上时,如何在html图像上显示缩放按钮.
?到现在为止我试过这个

<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

解决方法

考虑这个简单,干净和 elegant example使用最小标记：

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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!