CSS：在懸停狀態下重新定位元素，但保持可點擊區域位置

我試圖創建一個按鈕的效果，當翻頁時從頁面'擡起'。CSS：在懸停狀態下重新定位元素，但保持可點擊區域位置

使用CSS，我有一個塊風格<a>元素，當徘徊，重新將自己定位並向左5px的，和影子留下：

a { 
    display: inline-block; 
    position: relative; } 

a:hover { 
    top: -5px; left: -5px; 
    box-shadow: rgba(0,0,0,.2) 5px 5px 2px; }

的問題：當在懸停期間<a>塊與光標跳躍5px時，光標不再實際懸停在該塊上，然後當光標僅稍後移動時，塊跳回。

如何維護原始的懸停區域，以便在光標稍微移動時元素不會來回跳動？

我想避免在我的代碼中添加多餘的容器元素，如果可能的話。

來源

2012-03-28 abirduphigh

實現此目的的一種方法是使用多餘的元素（透明圖像或大尺寸的父div）。當用戶將圖像懸停在圖像上時，使用後代/子選擇器可以讓子元素「跳躍」。這可能只有最新的瀏覽器纔有可能。如果你正在尋找跨瀏覽器兼容性，使用javascript可能是正確的方法。

來源

2012-03-28 05:18:15 questzen

謝謝。雖然我現在必須在父div中包含每個按鈕，並且使用新的類選擇器來添加父類的樣式，但我實際上正在變得非常喜歡這種方法。父div是保持按鈕的「熱點」。當它盤旋時，它會在小孩內部推動'a'元素（但仍然在熱點內）。這比我接近這種情況的方式更有意義。 – abirduphigh 2012-03-28 16:05:39

這是我目前正在處理的網頁的鏈接。我不能說這個鏈接多長時間會保持相關。 http://poppysinger.xtreemhost.com/cards.php – abirduphigh 2012-03-28 16:45:31

-1

您可以使用CSS3延遲來抵消這個問題

a { 
display: block; 
position: relative; 
width:40px; 
height:30px; 
} 

a:hover { 
top: -5px; left: -5px; 
box-shadow: rgba(0,0,0,.2) 5px 5px 2px; 
-webkit-transition-duration: .2s; 
}

來源

2012-03-28 05:25:29 gout

我根據你的建議嘗試過。它所做的只是延遲了盒子陰影出現的時間。儘管這是一種淡化陰影的好方法，但並非真正在我所尋找的公園中。 – abirduphigh 2012-03-28 14:49:30

你托盤更換位置的財產？固定例如：

a:hover { 
position: fixed; 
}

來源

2013-04-05 07:47:42 Wojtek

CSS：在懸停狀態下重新定位元素，但保持可點擊區域位置

回答

相關問題