a:hover span 隱藏/顯示 問題


:hover是我們在CSS設計中最常運用的偽類之一,許多絢麗效果的實現離不開偽類:hover,比如我們常見的純CSS菜單、相冊效果等等。

或許用了這么久的偽類:hover,還有部分朋友還不完全了解hover的規則:

引用:
在CSS1中此偽類僅可用於a對象。且對於無href屬性(特性)的a對象,此偽類不發生作用。
在CSS2中此偽類可以應用於任何對象。

但目前IE5.5、IE6僅支持CSS1中的:hover,不過新出的IE7是支持CSS2中的:hover。

當我們用偽類:hover做某些特殊效果時,依據CSS2很好完成,但為了現在占據主流瀏覽器的IE6,我們又不得不做很多工作,比如給添加a元素等來模擬完成最終的效果。

IE bug:當<a>中元素采用position的時候,需要加一個背景來表明<a>的控制范圍,否則鼠標滑過沒有任何效果。
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="www.xincss.com" />
<style type="text/css">
a.moreshow {
    position:relative;
}
a.moreshow:hover {/*IE中的BUG,需要添加屬性改變BUG,例如background*/
    background:#fff;
}
a.moreshow span {
    display:none;
}
a.moreshow:hover span {
    position:absolute;
    display:block;
    width:140px;
    border:1px solid #1e6c09;
    background:#eef5ee;
}
</style>
<title>xincss.com</title>
</head>
<body>
IE bug:當&lt;a&gt;中元素采用position的時候,需要加一個背景來表明&lt;a&gt;的控制范圍,否則鼠標滑過沒有任何效果。<br />
<a href="#" title="" class="moreshow">【詳細】<span>BKK 曼谷:2007-05-07<br />
                        LCH 林查班:2007-07-07<br />
                        HCM 胡志明:2007-09-07<br />
                        HK 香港:2007-12-07</span></a>
</body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM