伪元素和按钮标记：如何防止伪元素被点击？

我有一个按钮（<button>标记，但呈现为一个链接）插入在一行文本的末尾。我需要明确区分按钮和文本，因此我使用:before伪元素和content: "—";属性来实现该功能。到现在为止还挺好。伪元素和按钮标记：如何防止伪元素被点击？

下面是一个例子：http://jsfiddle.net/Anto/UPjQL/

的问题是，伪元素的内容的行为就像按钮本身：悬停时，该光标default变为pointer光标和元件标有下划线。这是有道理的，但我想阻止这种行为，让它看起来就像一个普通的文本字符。

有什么想法？

我知道这里面包裹的按键，也就是说，一个span元素和然后给:before性能到包装将是一个更好的解决方案，但在这种情况下，我买不起。

来源

2012-08-01 Anto

在小提琴http://jsfiddle.net/joplomacedo/UPjQL/3/

.button-rendered-as-a-link { 
    position: relative; <------------- 
    border: none; 
    padding: 0; 
    margin: 0; 
    background: none; 
    -moz-border-radius: none; 
    -webkit-border-radius: none; 
    border-radius: none; 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    color: #8A89BA; 
    font-weight: bold; 
    left: 2em; <------------- 
} 
.button-rendered-as-a-link:hover { 
    text-decoration: underline; 
    cursor: pointer; 
} 

.button-rendered-as-a-link:before { 
    content:" — "; 
    position: absolute; <------------- 
    right: 100%; <------------- 
    padding: 0 5px; 
    color: grey; 
    cursor: default !important; 
    pointer-events: none; <------------- 
}

箭头代表我已经添加了的东西看看。

我基本上已经通过使用position：absolute从流中删除了伪元素。这使按钮的宽度等于没有psuedo元素时的宽度，因此它的下划线等于不超过该宽度。左侧和右侧的属性将它们放回原位。

然后，为了不触发按钮上的悬停，我将伪元素的指针事件设置为无。你可以在这里阅读更多关于https://developer.mozilla.org/en/CSS/pointer-events/。

来源

2012-08-01 17:03:56 banzomaikaka

Hooo，这很聪明:)我不知道指针事件属性。非常感谢！ – Anto 2012-08-01 17:16:54

没问题！很高兴我帮助;） – banzomaikaka 2012-08-01 20:59:12

我只是在你的情况下使用JavaScript，insertBefore方法应该做的很好！

var buttons = document.getElementsByClassName("button-rendered-as-a-link"); 
for (key in buttons) 
    try{ 
    buttons[key].parentNode.insertBefore(document.createTextNode(" - "),buttons[key]); 
    }catch(e){}// this may throw an error?

来源

2012-08-01 17:03:16 Zaq

不是一个坏主意，但我不能用JS来解决这个问题。不管怎么说，还是要谢谢你！ – Anto 2012-08-01 17:07:44

伪元素和按钮标记：如何防止伪元素被点击？

回答

相关问题