關於IE中偽類hover的使用及BUG
這篇文章主要介紹了關於IE中偽類hover的使用及BUG，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
IE中偽類hover的使用及BUG ，需要的朋友可以參考下。
偽類別:hover的規則：
在CSS1中，此偽類別僅可用於a物件。且對於無href屬性的a對象，此偽類不發生作用；
在CSS2中，此偽類可以應用於任何對象；
目前IE5.5、IE6僅支援CSS1中的:hover，不過新出的IE7以及Firefox支援CSS2中的:hover。
先用CSS2的寫法來實現：
<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>鼠标移过来触发我吧！<a href="#" title="">哈哈，终于被你发现了！</a></li>
</ul>
</body>
</html>提示：您可以先修改部分程式碼再執行
大家可以測試發現在Firefox等在CSS2支援很好的瀏覽器中，可以顯示我們所要達到的效果，但在IE6中卻無法實現。
下面讓我們換個思維，使用CSS1的寫法來看：
在CSS1中，由於無法支援li元素:hover的使用，所以把文字包含到a中，對a使用:hover，並且將要顯示隱藏的部分放到span元素中；
CSS中我們將a的設置成塊級元素，並使a的大小和寬度和li的相同；
並設置a為相對位置，用a來模擬上例中的li；
而用span來模擬上例中的a，設定span在預設情況下隱藏（display:none;）;
當a被觸發時（:hover），則span顯示（display:block;）；
但，如果按照上述方式修改後，範例的效果，在IE6中依然無法顯示。
原因是：IE瀏覽器本身解析的問題，是IE5.5和IE6中偽類:hover的BUG。
如何解決這個問題呢？
這個BUG可以透過在連結的屬性中增加某些特殊的CSS屬性聲明來消除。
li a:hover {}
對其屬性我們只設定width:100px;發現在IE6中依舊沒有變化，我們嘗試著更改width的value，比如使其width:99px，奇怪的事情發生了，在IE6中，隱藏的部分在觸發的時候顯示出來了。我們再對li a:hover的屬性只設定color來測試（初始值為#fff），更改color值，發現在IE6下卻也無法觸發顯示。 。 。
最後總結發現，除了text-decoration，color，z-index無法觸發顯示（對於無法觸發顯示的部分，可以還有某些遺漏的屬性）外，其他屬性均可以做為消除偽類:hover BUG的特定屬性。
說明：
1、不建議改變display值來做為特定屬性消除此BUG，而且在某些範例中此屬性不一定能消除BUG。
2、對於做為特定屬性的border和background中的顏色我們還可用全寫和簡寫來改變，如#fff和#ffffff在消除BUG中解析為2個不同的值。
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>
<li><a href="#" title="">鼠标移过来触发我吧！<span>哈哈，终于被你发现</span></a></li>
</ul>
</body>
</html>#提示：您可以先修改部分程式碼再執行
最少程式碼實作版(xugang實作)：
<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 href="#" title="">鼠标移过来触发
<span>
<ul>
<li>aaa</li>
<li>aaa</li>
</ul>
</span>
</a>
</li>
</ul>
</body>
</html>提示：您可以先修改部分程式碼再運行
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
##
以上是關於IE中偽類hover的使用及BUG的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
蘋果iOS18bug匯總
Jun 14, 2024 pm 01:48 PM
隨著蘋果WWDC發表會2024圓滿落幕，不僅揭曉了macos15，其中最受關注的還是蘋果iOS18新系統的更新，雖然有很多新功能出現，但是作為蘋果iOS18首版不免讓人糾結是否有必要升級蘋果iOS18，在最新發表的蘋果iOS18中又有哪些BUG存在呢？經過真實的使用測評，以下是蘋果iOS18bug匯總，一起來看看。目前有許多iPhone用戶都搶先升級到了iOS18.但各種系統Bug讓人難受。有部落客表示，升級iOS18要謹慎，因為「Bug多到飛起」。部落客表示，如果你的iPhone是
遊戲bug是什麼意思
Feb 18, 2024 am 11:30 AM
遊戲bug是什麼意思在玩遊戲的過程中，我們常常會遇到一些意想不到的錯誤或問題，例如角色卡住、任務無法繼續、畫面閃爍等等。這些不正常的現象就被稱為遊戲bug，也就是遊戲中的故障或錯誤。在本文中，我們將探討遊戲bug是什麼意思以及對玩家和開發者的影響。遊戲bug是指在遊戲的開發或運作過程中出現的錯誤，導致遊戲無法正常進行或出現不符合預期的情況。這些錯誤可能是由於
系統bage是什麼意思
Nov 09, 2022 pm 02:40 PM
系統bage就是指系統bug；bug原意是“臭蟲”，現在用來指稱電腦上存在的漏洞，原因是系統安全策略上存在的缺陷，有攻擊者能夠在未授權的情況下訪問的危害；廣義上，bug可用作形容各領域範圍內出現的漏洞或缺陷。
整理Win11的錯誤和問題
Jan 13, 2024 pm 08:21 PM
有些人想更新win11，但不知道win11bug多嗎，更新會不會出問題，實作在win11有bug，不過對使用影響不大。 win11bug多嗎：答：win11bug現在還是比較多的。不過這些bug對於日常使用的影響不大。如果使用者對於日常的使用要求很高的話，建議還是晚點再使用吧。 win11bug匯總一、資源管理器1、有時候會出現記憶體溢出，導致資源管理器記憶體佔用高。 2.這種情況會導致記憶體佔用超過70%，電腦卡頓、甚至崩潰。二、衝突死機1、部分應用程式相容性不足，導致互相衝突。 2、雖然衝突程序比較少，
bug的生命週期是什麼
Nov 08, 2022 pm 02:17 PM
BUG的生命週期就是一個BUG被發現到這個BUG被關閉的過程，具體過程為：1、發現BUG，即發現軟體程式的漏洞或缺陷；2、提交bug，需要盡量描述這個缺陷的屬性、重現環境、類型、等級，優先順序以及詳細的重現步驟、結果與期望等；3、指派bug，即將問題直接指派給對應的開發人員；4、分析並確認為缺陷；5、處理並修復BUG； 6、回歸驗證BUG；7、關閉BUG。
網路熱詞bug是什麼意思
Jan 21, 2021 pm 02:15 PM
網路熱詞bug是指電腦上存在的漏洞。漏洞*（bug）是在硬體、軟體、協定的特定實現或系統安全策略上存在的缺陷，從而可以使攻擊者能夠在未授權的情況下存取或破壞系統。漏洞可能來自應用軟體或作業系統設計時的缺陷或編碼時產生的錯誤，也可能來自業務在互動處理過程中的設計缺陷或邏輯流程上的不合理之處。
win10最新版本1903BUG有什麼
Jan 07, 2024 pm 10:37 PM
在微軟更新了win101903版本之後，新的版本除了修復了先前版本出現的bug、新增並改進了一些功能的同時，也不可避免的出現了新的版本中存在的問題。其中大多都是關於相容性和穩定性的bug，但好在問題不大。具體內容大家就來和小編一起看一下~希望可以幫助到你。 win10最新版本1903BUG有什麼微軟宣布已經修復了Windows102019五月更新中的三個嚴重BUG1、首先是杜比全景聲（DolbyAtoms）和家庭影院的音頻問題。某些裝置可能在安裝Version1903後遺失音訊。原先該音頻BUG
一行程式碼，讓你的 Python bug 與眾不同
Apr 14, 2023 am 09:16 AM
PrettyErrors 是一个精简 Python 错误信息的工具，特点是界面十分简洁友好。它最显著的功能是支持在终端进行彩色输出，标注出文件栈踪迹，发现错误信息，过滤掉冗余信息，提取出关键部分，并且进行彩色标注，从而提高开发者的效率。写代码本身就很不容易，特别是在几万行的代码中出现一个bug，一时半会找不到问题所在，这个时候，你一定很抓狂，很烦躁。特别是Python代码出错了，满屏幕大段大段的错误信息提示，想定位错误更是难上加难。先来看看上面这段 traceback 只有一种颜色，无法像代码高
