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;
}

Div上的伪元素点击未传递给按钮

1 个答案: