如果元素位置發生改變，點擊未註冊

我剛剛在<a>元素上發現了這個奇怪的問題。我想用「下推」動畫製作一個只有css的按鈕。如果元素位置發生改變，點擊未註冊

或多或少是這樣的：

.button:active { 
position: relative; 
top: 10px; 
}

的問題是，鏈接似乎沒有，如果你做了文字下方的鼠標按下工作時解除文本已moven指針下方（動畫運行正常，但onclick或href不工作）。你可以看到在「錯誤」或不管它是在這個提琴：

http://jsfiddle.net/H9RgD/

我已經嘗試不同的東西，喜歡用填充，以創建動畫，但它仍然無法正常工作。我可以確認它不在Chrome 22（截至今天的最新版本）。爲什麼會發生？我怎樣才能解決這個問題來動畫一個CSS按鈕？

來源

2012-10-23 lisovaccaro

我不是在文本下方點擊時看到任何不同的行爲。我在IE9和Firefox 16中進行了測試。兩者都將元素「轉移」到活動狀態。 IE9在點擊時放置了一個空白的警報框，而Firefox沒有（[所以我添加了警報內容]（http://jsfiddle.net/6bEq8/2/），然後也工作）。 – ScottS

@ScottS這就是答案，Firefox會拋出一個NS_ERROR_XPC_NOT_ENOUGH_ARGS：沒有足夠的參數[nsIDOMWindow.alert]，如果你沒有任何參數調用alert（）。 – Willem

@威廉 - 也許。但OP沒有說什麼瀏覽器，對我來說，點擊文本或文本下沒有區別，所以我不知道這是否是真正的問題。 – ScottS

無法回答「爲什麼」（我認爲這可能是一個錯誤）。似乎我回想起Chrome遇到類似的問題，並提出了類似的解決方法，就像我在這裏提供的。不知何故，添加僞元素的「疊加」會導致整體變成「可點擊」。在你的情況下，我注意到，如果我點擊div的頂部，它也沒有註冊，但是當我在:active狀態下將top調整添加到:before時，這似乎也解決了。

This fiddle似乎有一個工作解決方案。 HTML是一樣的小提琴（除了我添加的內容到警報）：

HTML

<div class="tabs-container"> 
<div onclick="alert('here')">Click below the text</div> 
</div>

CSS

.tabs-container div{ 
    display: inline-block; 
    background: whitesmoke;  
    padding-bottom: 5px; 
    font-size: 25px; 
    border-bottom: 5px solid grey; 
    position: relative; 
} 

.tabs-container div:active{ 
    top: 10px; 
    border-bottom: 0; 
} 

.tabs-container div:before { 
    position: absolute; 
    content: ''; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

.tabs-container div:active:before { 
    top: -10px; 
}

來源

2012-10-23 03:21:30 ScottS

如果元素位置發生改變，點擊未註冊

回答

相關問題