2013/01/06

:HOVER 第二頁

:HOVER 2

用 display 改造 ANCHOR 元素。由於 IE6 不支援一般元素使用 :HOVER, :ACTIVE,所以用 display:block 改造 ANCHOR 元素。下例中 href='javascript:void(0)' 一定要加,否則 IE6 無法展現。經此改造的元素,其子元素不可以是 ANCHOR 元素,否則 Firefox 會失敗;下面的範例使用 SPANONCLINK 製作超連結。範例中還加了 TABLE, TR, TD 如果不加的話,IE6 中無法點選超連結。這裡還有另一個 選單的範例

將 :hover 狀態傳給子元素。這個練習使用 .ak2:hover I,將 :hover 狀態傳給子元素 I。要注意 .ak2:hover 這行如果拿掉,在 IE6 會失敗。

將 :hover 狀態傳給下一個元素。下例使用 E + F 規則。

  • 上例,Firefox 成功;IE6, Safari, Chrome 失敗。使用 E ~ F 規則測試,也得到相同的結果。
HOVER(你正在看 第二頁) : 第一頁 第二頁