Div單元上的僞元素不傳遞給按鈕

Question

我必須在ASP.NET網站中顯示帶有文本的圖像。要做到這一點，我已經重寫了按鈕渲染以在按鈕周圍添加div標籤，結果如下所示。

<div class="wrapper cmd_save" id="_PageTemplate_innerHolder_btnsave_div"> 

<input name="_PageTemplate$innerHolder$btnsave value="Save" onclick="alert('hi');" id="_PageTemplate_innerHolder_btnsave" tabindex="5" class="cmd_base" type="submit"> 

</div> 


.cmd_base 
{ 
    background-color: #EFEFEF; 
    border: 1px solid #C0C0C0; 
    border-radius: 3px; 
    width: 85px; 
    z-index: 50; 
    background-image: -ms-linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);/* IE6-9 */ 
} 

div.wrapper 
{ 
    display: inline; 
    position:relative; 
    height:16px; 
    background:transparent; 
} 

div.wrapper:after 
{ 
    background-color: #EFEFEF; 
    background:url('../_images/my_sprite.png') ; 
    content:" "; 
    position:absolute; 
    top:0px; 
    left:8px; 
    width:20px; 
    height:22px; 
} 

div.cmd_search:after 
{ 
    background-position:-120px -8px; 
}. 


.cmd_base 
{ 
    background-color: #EFEFEF; 
    border: 1px solid #C0C0C0; 
    border-radius: 3px; 
    width: 85px; 
    z-index: 50; 
    background-image: -ms-linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);/* IE6-9 */ 
} 

div.wrapper 
{ 
    display: inline; 
    position:relative; 
    height:16px; 
    background:transparent; 
} 

div.wrapper:after 
{ 
    background-color: #EFEFEF; 
    background:url('../_images/my_sprite.png') ; 
    content:" "; 
    position:absolute; 
    top:0px; 
    left:8px; 
    width:20px; 
    height:22px; 
} 

div.cmd_search:after 
{ 
    background-position:-120px -8px; 
} 

它工作得很好，看起來也很好。但唯一的問題是，當我點擊圖像時，它確實會調用Div內部的按鈕。對此有任何幫助。

Answer 1

感謝您的幫助。我只是添加了指針事件：無;在Div的僞類中，它現在正在工作。點擊事件正在傳遞給按鈕。

div.wrapper:after 
{ 
    background-color: #EFEFEF; 
    background:url('../_images/my_sprite.png') ; 
    content:" "; 
    position:absolute; 
    top:0px; 
    left:8px; 
    width:20px; 
    height:22px; 
pointer-events: none; 
}