僞元素和按鈕標記：如何防止僞元素被點擊？

我有一個按鈕（<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

僞元素和按鈕標記：如何防止僞元素被點擊？

回答

相關問題