我正在申请 transform:scale
到 <img>
的 :hover 事件元素嵌套在 <button>
中控制。
它适用于 Chrome,但不适用于 Firefox 或 IE。
这是代码(如下)。有没有办法让它在 Firefox 和 IE 中工作?
我想保留对嵌套 <img>
的悬停事件的影响文件,但我可以把它放在 <button>
上如果需要的话。我真的很好奇这段代码是否可以在 FF 和 IE 上运行,或者它是否是这些浏览器的已知限制(或 Chrome 允许的非标准功能)。
.zoomable {
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-ms-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
border: 1px transparent solid;
}
.zoomable:hover {
border: 1px orange solid;
transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
}
<button>
<img src="bogus.png" class="zoomable" />
</button>
最佳答案
您应该在 button
上设置 :hover
并保持一切原样。正如你所说。如果您使用的元素不包含诸如 div
或 span
之类的交互,您可以保留 .zoomable:hover
并且它会起作用。这是一个按钮问题,因为它带来了原生交互并且可能与子元素悬停事件发生冲突。
关于html - 变换比例不适用于嵌套在按钮中的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33006148/