日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁 > 云知道 > >

IE中偽類hover的使用及BUG

云知道

偽類:hover的規(guī)則：
在CSS1中，此偽類僅可用于a對(duì)象 。且對(duì)于無href屬性的a對(duì)象，此偽類不發(fā)生作用；
在CSS2中，此偽類可以應(yīng)用于任何對(duì)象；
目前IE5.5、IE6僅支持CSS1中的:hover，不過新出的IE7以及Firefox支持CSS2中的:hover 。
先用CSS2的寫法來實(shí)現(xiàn)：


html head style * {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;} /style /head body ul li鼠標(biāo)移過來觸發(fā)我吧！a title=""哈哈，終于被你發(fā)現(xiàn)了！/a/li /ul /body /html
ffcod = delpost.runcode31 .value; ffcod = ffcod.replace(/
/g,’’); delpost.runcode31 .value = https://www.rkxy.com.cn/dnjc/ffcod; 提示：您可以先修改部分代碼再運(yùn)行
大家可以測(cè)試發(fā)現(xiàn)在Firefox等對(duì)CSS2支持很好的瀏覽器中，可以顯示我們所要達(dá)到的效果，但在IE6中卻無法實(shí)現(xiàn) 。
下面讓我們換一種思維，使用CSS1的寫法來看看：
在CSS1中，由于無法支持li元素:hover的使用，所以把文字包含到a中，對(duì)a使用:hover，并且將要顯示隱藏的部分放到span元素中；
CSS中我們將a的設(shè)置成塊級(jí)元素，并使a的大小和寬度和li的相同；
并設(shè)置a為相對(duì)位置，用a來模擬上例中的li；
而用span來模擬上例中的a，設(shè)置span在默認(rèn)情況下隱藏（display:none;）；
當(dāng)a被觸發(fā)時(shí)（:hover），則span顯示（display:block;）；
但，如果按照以上方式修改后，示例的效果，在IE6中依然無法顯示 。
原因是：IE瀏覽器自身解析的問題，是IE5.5和IE6中偽類:hover的BUG 。
如何解決這個(gè)問題呢？
這個(gè)BUG可以通過在鏈接的屬性中增加某些特殊的CSS屬性聲明來消除 。
li a:hover {}
對(duì)其屬性我們僅設(shè)定width:100px;發(fā)現(xiàn)在IE6中依舊沒有變化，我們嘗試著更改width的value，比如使其width:99px，奇怪的事情發(fā)生了，在IE6中，隱藏的部分在觸發(fā)的時(shí)候顯示出來了 。我們?cè)賹?duì)li a:hover的屬性僅設(shè)定color來測(cè)試（初始值為#fff），更改color值，發(fā)現(xiàn)在IE6下卻也不能觸發(fā)顯示 。。。
最后總結(jié)發(fā)現(xiàn)，除了text-decoration，color，z-index不能觸發(fā)顯示（對(duì)于不能觸發(fā)顯示的部分，可以還有某些遺漏的屬性）外，其他屬性均可以做為消除偽類:hover BUG的特定屬性 。
說明：
1、不建議改變display值來做為特定屬性消除此BUG，而且在某些例子中此屬性不一定能消除BUG 。
2、對(duì)于做為特定屬性的border和background中的顏色我們還可用全寫和簡寫來改變，如#fff和#ffffff在消除BUG中解析為2個(gè)不同的值 。
CSS1的寫法最終效果：


html head style * {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 a:hover {background:#ccc;} li span {display:none; } li a:hover span {display:block; width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff; } /style /head body ul lia title=""鼠標(biāo)移過來觸發(fā)我吧！span哈哈，終于被你發(fā)現(xiàn)/span/a/li /ul /body /html
ffcod = delpost.runcode32 .value; ffcod = ffcod.replace(/
/g,’’); delpost.runcode32 .value = https://www.rkxy.com.cn/dnjc/ffcod; 提示：您可以先修改部分代碼再運(yùn)行
最少代碼實(shí)現(xiàn)版(xugang實(shí)現(xiàn))：


html head style li {height:10px; width:120px; background:#000;} li a{height:10px; width:120px; display:block;} li a:hover {background:#ccc;} li span {display:none;} li a:hover span {display:block; width:100px; height:40px; background:#c00; position:absolute; top:15px; left:180px;} /style /head body ul li a title=""鼠標(biāo)移過來觸發(fā) span ul liaaa/li liaaa/li /ul /span /a /li /ul /body /html

推薦閱讀