:HOVER 第二頁

:HOVER 2

用 display 改造 ANCHOR 元素。由於 IE6 不支援一般元素使用 :HOVER, :ACTIVE，所以用 display:block 改造 ANCHOR 元素。下例中 href='javascript:void(0)' 一定要加，否則 IE6 無法展現。經此改造的元素，其子元素不可以是 ANCHOR 元素，否則 Firefox 會失敗；下面的範例使用 SPAN 與 ONCLINK 製作超連結。範例中還加了 TABLE, TR, TD 如果不加的話，IE6 中無法點選超連結。這裡還有另一個 選單的範例。 <style type='text/css'> .ank {display:block; text-decoration:none; width:200px; height:24px; overflow:hidden; border:solid 1px red; color:white; white-space:nowrap; } .ank:hover {text-decoration:none; background:black; height:auto; white-space:pre; } .ank:hover TD {white-space:pre} .ank SPAN {text-decoration:underline; color:red; cursor:pointer; } </style> <a class=ank href='javascript:void(0)'>動作遊戲 <table><tr><td> <span onclick='location.href="http://gamelily.blogspot.com/2008/11/blog-post_3953.html"'>長劍客戰骷髏</span> <span onclick='location.href="http://gamelily.blogspot.com/2008/11/blog-post_2534.html"'>坦克衝鋒戰</span> </td></tr></table> </a> <a class=ank href='javascript:void(0)'>競速遊戲 <table><tr><td> <span onclick='location.href="http://gamelily.blogspot.com/2008/11/blog-post_3232.html"'>摩托車飛峽谷</span> <span onclick='location.href="http://gamelily.blogspot.com/2008/11/blog-post_430.html"'>城市碰碰車</span> </td></tr></table> </a>

將 :hover 狀態傳給子元素。這個練習使用 .ak2:hover I，將 :hover 狀態傳給子元素 I。要注意 .ak2:hover 這行如果拿掉，在 IE6 會失敗。 <style type='text/css'> .ak2 {width:60%; text-decoration:none; border:solid 1px red; color:white; } .ak2:visited {text-decoration:none} .ak2:hover {border:solid 4px green;} .ak2:hover I {font-size:2em; color:red} </style> <a class=ak2 href='javascript:void(0)'> <q>Q 元素</q> <i>I 元素</i> <q>Q 元素</q> <i>I 元素</i> <q>Q 元素</q> <i>I 元素</i> </a>

將 :hover 狀態傳給下一個元素。下例使用 E + F 規則。 <style type='text/css'> .fcs {border:solid 1px red} .fcs:hover {background:blue} .fcs:hover + SPAN {background:white; color:red} </style> <span class=fcs>遊戲樂園</span> <span>好玩遊戲，射擊遊戲，賽車遊戲。</span>

• 上例，Firefox 成功；IE6, Safari, Chrome 失敗。使用 E ~ F 規則測試，也得到相同的結果。

HOVER（你正在看 第二頁）

:

第一頁

第二頁