html - 变换比例不适用于嵌套在按钮中的元素

Question

我正在申请 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>

Answer 1

您应该在 button 上设置 :hover 并保持一切原样。正如你所说。如果您使用的元素不包含诸如 div 或 span 之类的交互，您可以保留 .zoomable:hover 并且它会起作用。这是一个按钮问题，因为它带来了原生交互并且可能与子元素悬停事件发生冲突。