圖標元素會干擾鼠標懸停事件上按鈕的流動，如何重新排列按鈕上的圖標以確保不會發生？

Question

當我將鼠標懸停在按鈕上的「消息」部分，懸停動畫作品，但是當我將鼠標懸停在圖標，懸停動畫不會發生，這使得它一個貧窮的按鈕。

這裏的HTML

<div> 
    <i className="profile-user-button-message-icon">message</i> 
    <button className="button-icon-message ">Message</button> 
</div> 

希望這個信息是不夠了解我的問題，下面的評論，如果您需要了解更多信息，謝謝！

它是React代碼，因此是「className」。

CSS代碼圖標

.profile-user-button-message-icon{ 
    position:absolute; 
    left:0px; 
    top:20px; 
} 

Fiddle

Answer 1

你可以寫button:before {content: ''; display: inline-block; width: 10px; height: 10px; background: url('your bg-image');}