html - 放大 :Hover 上的图像

Question

我开始学习使用 HTML 和 CSS。

我有一些想法，并且我知道这在 JavaScript 的帮助下是可能的。但我想知道仅使用 CSS 是否可行。

这是我的图片:

<img id="picturegoeshere" src="picture.png" width="100" height="90">

这是 CSS 部分:

.picturegoeshere:hover
{
 transform:scale(2,2);
 transform-origin:0 0;
}

他们是点击图像然后弹出的方法吗？ “悬停”有效，但我希望“弹出窗口”保留。因为在这部分工作之后，我想添加有关图像的信息(超链接或其他内容)。

我找到了.picturegoeshere:active，但这只会在鼠标单击仍然按下时使其变大..

我确信很多人都问过同样的问题，但我似乎找不到他们的问题，我一定是搜索了错误的问题，因为我猜我还不知道CSS的术语？

Answer 1

不，不喜欢你正在做的事情......

如果你只想使用这个CSS，那么就这样做......如您所知，您可以使用焦点而不是单击它!对! (两者意思相同)。只需在屏幕上创建弹出菜单并将其隐藏，然后使用像这样的 css

#image1:焦点#popupmenu{

显示:初始；

}

你需要什么::: 1. 先在屏幕上显示图像。

使用position:fixed显示弹出菜单；

然后隐藏菜单。

隐藏后使用

#image1:focus #popupmenu{ display:initial; }

这会为您创建一个弹出菜单。

对关闭按钮和拇指更改使用相同的方法