欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:澳门赌球网 > CSS hack >

IE6不支持hover赋予css样式的解决方法 如div:hover li:hover支持

一般对div选择器样式设置:hover ie6浏览器不支持,如li:hover img:hover .abc:hover非a链接标签设置hover其ie6均不支持,这里为大家整理完美兼容让ie6支持hover赋予css样式

扩展阅读
1、css a hover
2、css超链接样式
3、ie6 png透明兼容

对于类似的“p:hover”、“img:hover”、"li:hover"、".abc:hover"、“#header:hover”...IE6不支持hover,鼠标经过不会出现赋予澳门赌球网样式,以下我们个大家介绍一种最简单兼容各大浏览器特别针对IE6支持:hover解决方法。

首先需要对body样式设置一个插件文件(csshover.htc),这样ie6即可支持hover表达式。

让IE6支持hover解决方法步骤如下:

一、csshover.htc下载   -   TOP

下载压缩包文件解压后得到文件“csshover.htc”,为了避免css样式引入“csshover.htc”路径出错,将此文件与css文件放到相同文件夹内。这里实验就不单独新建css文件,就只有一个"index.html"文件,所以这里将“csshover.htc”与“index.html”放到相同文件夹里。

相同文件夹内
放入相同文件夹内

二、在body样式选择器内引入文件   -   TOP

定义在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文件):

  1. <style> 
  2. body{behavior:url("csshover.htc");} /* 使用时候注意路径正确 */
  3. </style> 

注意csshover.htc路径

三、ie6支持hover案例   -   TOP

我们分别进行三个实验实例。

1、实验实例描述

第一个实例:对img标签赋予hover(即 img:hover{...} )样式,鼠标经过时图片边大,出现边框与padding距离;

第二个实例:对li标签赋予hover(即 li:hover{...} )样式,鼠标经过时候ul li标签出现黑色边框;

第三个实例:对自己随便命名css样式选择名称赋予hover(即 .abc:hover{...} ),鼠标经过此abc对象DIV盒子时候,对象内文字变为红色。

2、此三个小实验实例CSS代码如下:

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

3、三实验对应HTML源代码

  1. <!-- html注释:1 鼠标经过图片变大 --> 
  2. <img src="divcss5-logo-2013.gif" alt="DIVCSS5 LOGO" /> 
  3.  
  4. <!-- 2 鼠标经过li出现边框  --> 
  5. <ul> 
  6. <li>对li设置hover样式,鼠标经过加CSS边框</li> 
  7. </ul> 
  8.  
  9. <!-- 3 鼠标经过abc盒子内文字变为红色  --> 
  10. <div class="abc">对.abc:hover,鼠标经过时候文字颜色变红</div> 

4、实例DW截图

hover实验截图
IE6支持hover在DW软件截图

5、案例演示查看演示

6、完整解决ie6支持:hover打包下载(包括了案例使用图片素材、index.html超文本文件、csshover.htc文件)

 

如需转载,请注明文章出处和来源网址:http://www.jiuyinet.com/css-hack/c528.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
澳门赌球网文章修订日期:2013-05-30 15:41 原创:澳门赌球网
本文www.jiuyinet.com DIVCSS5版权所有。