重疊懸停裝飾

鑑於以下圖像，我真的不知道如何最好地處理此問題。重疊懸停裝飾

enter image description here

我的意思是我可以做一個精靈的圖像和位置每個環節/圖標絕對因此當懸停狀態時他們不這樣做互相推動。然而，問題在於可點擊區域隨着懸浮狀態的增加而增加，從而與其他按鈕重疊並使其難以點擊。

任何建議/想法將不勝感激。

乾杯！

我的解決方案感謝@揚 - karadimas

http://codepen.io/trev/pen/overlapping-hover-states/2

來源

2012-07-07 EasyCo

如果這裏沒有參與的運動，沒有您無法將觸發區域與圖像本身分開的原因。使所有觸發器不可見div都浮在圖形上方，可點擊區域將保持不變且可預測。圖形中的變化，如將圖像疊加到另一個圖形或更改精靈的位置，根本不需要與可點擊區域相關。

爲了幫助您進行初始定位和調試，您可以先在每個圖層周圍放置一個邊框，然後將它們放置在圖形上方。完成後，移除邊框並使圖層透明，並使用完全透明的GIF填充它們。

來源

2012-07-07 08:05:26

沒有嘗試過，但我認爲它應該工作。

.button:hover:after { 
    display: inline; 
    position: absolute; 
    left: 60px; // button's width/2 
    width: 150px; 
    height: 150px; 
    background-image:url('cross.png'); 
}

來源

2012-07-07 08:01:57

你需要創建圖標容器內的絕對定位elments（或僞元素），並在顯示他們的鼠標。因此，它不會影響懸停區域。

下面是用僞元素的例子，但如果你需要支持IE < 8，你可以再補充正常的：

http://jsfiddle.net/bFVx8/

來源

2012-07-07 08:04:45 unclenorton

重疊懸停裝飾

回答

相關問題