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

我想知道当鼠标悬停在html上时,如何在html图像上显示缩放按钮.

到现在为止我试过这个

但这里的主要问题是如何设置背景图像的大小以及如何仅在鼠标悬停时显示zoom.jpg,否则不会.当鼠标悬停背景图像时,如何将zoom.jpg放在背景图像的右下角.

我以前曾问过这个问题,但当时我并不具体,但现在我试图具体了.

请帮我解决这个问题.

谢谢

Somdeb

解决方法:

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

HTML：

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,css,html

来源： https://codeday.me/bug/20190709/1417012.html