首頁 > web前端 > html教學 > ie6支持hover嗎?

ie6支持hover嗎?

php中世界最好的语言
發布: 2017-11-22 10:34:49
原創
2318 人瀏覽過

正常情況下來說是支援的,如果你的瀏覽器不支援hover怎麼辦?那我們就給大家解決瀏覽器不支援hover的解決方法。

首先我們要csshover.htc下載

下載壓縮包檔案解壓縮後得到檔案“csshover.htc”,為了避免css樣式引入“csshover.htc”路徑出錯,將此文件與css檔案放到相同資料夾內。這裡實驗就不單獨新建css文件,就只有一個"index.html"文件,所以這裡將「csshover.htc」與「index.html」放到相同資料夾裡。

相同資料夾內

放入相同資料夾內

在body樣式選擇器內引入檔案

#定義在body樣式選擇器內“ body { behavior:url("csshover.htc"); }”,可放在樣式程式碼最前面。

body選擇器定義

body選擇器內定義引入csshover.htc

這樣就大功告成,此網頁css樣式定義如div:hover、li:hover、p :hover、自訂命名css選擇名稱(.abc:hover)、img:hover,所定義賦予樣式IE6均支援了。

特別特別注意:

要成功需要直接在HTML中加入以下程式碼(HTML檔案內直接引入csshover.htc檔案):

<style> 
body{behavior:url("csshover.htc");} /* 使用时候注意路径正确 */
</style>
登入後複製

 

##注意csshover.htc路徑。

ie6支援hover案例

我們分別進行三個實驗實例。

實驗實例描述

第一個實例:對img標籤賦予hover(即img:hover{...} )樣式,滑鼠經過時圖片邊大,出現邊框與padding距離;

第二個實例:對li標籤賦予hover(即li:hover{...} )樣式,滑鼠經過時候ul li標籤出現黑色邊框;

第三個實例:對自己隨便命名css樣式選擇名稱賦予hover(即.abc:hover{...} ),滑鼠經過此abc物件DIV盒子時候,物件內文字變成紅色。

此三個小實驗實例CSS程式碼如下:

body { behavior:url("csshover.htc"); }/* css注释:别忘记csshover.htc,使用时候注意路径 */ 
img{width:165px; height:60px; background:#090;}/* 原本图片宽度和高度背景颜色 */ 
img:hover{width:200px; height:200px; padding:3px; border:2px solid #00F; cursor:pointer} 
/* hover鼠标经过赋予让图片变宽 高,设置padding和2px蓝色边框、css cursor为鼠标指针样式  */ 
li:hover{ border:1px solid #000}/* li列表标签鼠标经过出现黑色边框 */ 
.abc:hover{ color:#F00}/* 对象.abc鼠标经过其内容css字体颜色变红色 */
登入後複製

三實驗對應HTML原始碼:

<!-- html注释:1 鼠标经过图片变大 --> 
<img src="div -logo-2013.gif" alt="DIV LOGO" /> 
<!-- 2 鼠标经过li出现边框  --> 
<ul> 
<li>对li设置hover样式,鼠标经过加CSS边框</li> 
</ul> 
<!-- 3 鼠标经过abc盒子内文字变为红色  --> 
<div class="abc">对.abc:hover,鼠标经过时候文字颜色变红</div>
登入後複製

瀏覽器不支援hover的解決方法就這麼多,有需要的朋友可以保存一下,也請大家持續關注本站的其他更新#。

相關閱讀:

html導航條製作的圖文程式碼分享


怎麼用CSS操作div的z-index


html的錨文本怎麼寫

#

以上是ie6支持hover嗎?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板