轉換比例不適用於嵌套在按鈕中的元素

Question

我將transform:scale應用於嵌套在<button>控件中的<img>元素的：hover事件。

它適用於Chrome，但不適用於Firefox或IE。

下面是代碼（下面）。有沒有辦法讓它在Firefox和IE中工作？

我想保留對嵌套<img>文件的懸停事件的影響，但如果需要，我可以將它放在<button>上。我真的很好奇，如果這個代碼可以在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離開，它將起作用。這是一個按鈕問題，因爲它帶來了本地交互，並可能與子元素懸停事件相沖突。