|
:hover是我們在CSS設計中最常運用的偽類之一，許多絢麗效果的實現(xiàn)離不開偽類:hover，比如我們常見的純CSS菜單、相冊效果等等。
或許用了這么久的偽類:hover，還有部分朋友還不完全了解hover的規(guī)則：
引用:
在CSS1中此偽類僅可用于a對象。且對于無href屬性（特性）的a對象，此偽類不發(fā)生作用。
在CSS2中此偽類可以應用于任何對象。
但目前IE5.5、IE6僅支持CSS1中的:hover，不過新出的IE7是支持CSS2中的:hover。
當我們用偽類:hover做某些特殊效果時，依據(jù)CSS2很好完成，但為了現(xiàn)在占據(jù)主流瀏覽器的IE6，我們又不得不做很多工作，比如給添加a元素等來模擬完成最終的效果。
或許這樣講太空洞，請看下面一個常見的觸發(fā)顯示的例子（僅選擇IE6為例講解）。
我們先用CSS2的寫法來實現(xiàn)：
XHTML部分：
<ul>
<li>鼠標移過來觸發(fā)我吧！<a href="#" title="">哈哈，終于被你發(fā)現(xiàn)了！</a></li>
</ul>
CSS部分：
* {margin:0; padding:0;}
ul {list-style:none;margin:100px;}
li {height:100px; width:100px; background:#000; font-size:12px; color:#fff; position:relative;}
li a {display:none;}
li:hover a{display:block; text-decoration:none;width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff;}
演示效果：
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
大家可以測試發(fā)現(xiàn)在FF等對CSS2支持很好的瀏覽器中，可以顯示我們所要達到的效果，但在IE6中卻無法實現(xiàn)。
下面讓我們換一種思維，所用CSS1的寫法來看看，這個時候由于無法支持li元素:hover的使用，我們只好把所有文字包含到a中，對a使用:hover，并且將要顯示隱藏的部分放到span元素中，首先我們對XHTML進行部分調整，調整如下：
XHTML部分：
<ul>
<li><a href="#" title="">鼠標移過來觸發(fā)我吧！<span>哈哈，終于被你發(fā)現(xiàn)</span></a></li>
</ul>
CSS中我們將a的設置成塊級元素，并使a的大小和寬度和li的相同，并設置a為相對位置，用a來模擬上例中的li；而用span來模擬上例中的a，設置span在默認情況下隱藏（display:none;），當a被觸發(fā)時（:hover），則span顯示（display:block;）
CSS部分：
* {margin:0; padding:0;}
ul {list-style:none;margin:100px;}
li {height:100px; width:100px; background:#000; font-size:12px; }
li a {display:block; height:100px; width:100px; position:relative; color:#fff; text-decoration:none;}
li span {display:none; }
li a:hover span {display:block; width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff; }
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
出處：藍色理想
責任編輯：moby
上一頁 下一頁 IE中偽類:hover的使用及BUG [2]
◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 IE中偽類:hover的使用及BUG [1]
第 2 頁 
