天天看點

CSS滑鼠懸浮DIV後顯示DIV外的按鈕

昨天寫樣式遇到個問題,如何讓滑鼠懸浮DIV後,顯示DIV外的按鈕,可以點選到按鈕。

效果如下:

CSS滑鼠懸浮DIV後顯示DIV外的按鈕

問題:

在DIV hover時候将按鈕設為display: block,這是很直接的想法,但是這有個問題,就是在懸浮出現按鈕後,滑鼠要移到按鈕上過程中,離開了DIV經過間距時,按鈕就會消失。

解決辦法:

1. 選擇更大區域的DIV

這個時候hover出現的按鈕,由于滑鼠還在DIV(大區域)中,是以按鈕是可以正常點到的。但這個方法問題在于擴大了觸發區域,如果本意上是要最初的DIV來觸發,那這個方法就不行。

2.增加一個不可見層

CSS滑鼠懸浮DIV後顯示DIV外的按鈕

如藍色框所示,在DIV增加一個絕對定位的區域至按鈕底下,這樣在滑鼠移到按鈕過程中,都屬于在DIV内部,按鈕也就不會消失。這個方法的好處在于,絕對适當的觸發區域。

<a></a>

本文轉自 海角在眼前 部落格園部落格,原文連結: http://www.cnblogs.com/lovesong/p/7435127.html  ,如需轉載請自行聯系原作者