CSS 邊框重疊鼠標懸停效果

前幾天某個同事的項目中碰到一個邊框重疊鼠標懸停效果，要實現(xiàn)鼠標移上后按鈕邊框換色，但左右兩個按鈕的邊框又是合并在一起的。就像下面這張圖片示意：

如果看不明白，請移步參考淘寶搜索結(jié)果頁面中的“信用”、“價格”兩個排序按鈕。http://s.taobao.com/search?q=%CC%D4%B1%A6

以三個橫排并列的按鈕為例：

這個問題的關(guān)鍵在于合并相鄰兩個容器的邊框，視覺上就像表格邊框的合并那樣，芒果選擇使用負 margin 來隱藏右側(cè)邊框。鼠標 hover 時如何才能使當前按鈕邊框呈現(xiàn)出來？其實也很簡單，只要給 a:hover 偽類加上 position:relative;z-index:1; 即可。另外，為了修復(fù) IE6 下的定位問題，建議給每一個 a 元素添加 position:relative; 屬性。樣式代碼如下：

最終效果如下。因為子節(jié)點浮動，外層最好能清除浮動，清浮動的方法請猛擊此處查看：http://www.mangguo.org/mangguo-teach-you-clear-float

另外，芒果還想到一種形如九宮格的 CSS 實現(xiàn)，代碼也很簡潔。

詳情參考：DEMO

出處：http://www.mangguo.org

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習有所幫助,可以手機掃描二維碼進行捐贈