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

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

对于类似的“p:hover”、“img:hover”、"li:hover"、".abc:hover"、“#header:hover”...IE6不支持hover,鼠标经过不会出现赋予css样式,以下我们个大家介绍一种最简单兼容各大浏览器特别针对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”放到相同文件夹里。

0a8714ab27222a4478bdfbebd7344fb7.png

放入相同文件夹内

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

定义在body样式选择器内“body { behavior:url("csshover.htc"); }”,可放于样式代码最前面。

865413965c1330958d4bf39621d2752b.png

body选择器内定义引入csshover.htc

这样就大功告成,此网页css样式定义如div:hover、li:hover、p:hover、自定义命名css选择名称(.abc:hover)、img:hover,所定义赋予样式IE6均支持了。

特别特别注意:

要成功需要直接在HTML中加以下代码(HTML文件内直接引入csshover.htc文件):

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

注意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代码如下:

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蓝色边框、csscursor为鼠标指针样式  */

li:hover{ border:1px solid #000}/* li列表标签鼠标经过出现黑色边框 */

.abc:hover{ color:#F00}/* 对象.abc鼠标经过其内容css字体颜色变红色 */

3、三实验对应HTML源代码:

  • 对li设置hover样式,鼠标经过加CSS边框

对.abc:hover,鼠标经过时候文字颜色变红

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
":hover"是CSS中使用最广泛的伪类之一,用于创建鼠标悬停效果。它可以应用于标签或div等元素,通过简单的CSS选择器来选择具体的元素并定义其悬停时的样式。 然而,需要注意的是,这种效果仅适用于CSS2及以上版本的浏览器,对于仅支持CSS1的浏览器可能无法显示。在IE6中,只兼容a:hover伪类,而其他元素的:hover效果可能无法实现。 要为一个元素添加:hover样式,可以使用类选择器来选中该元素,并在CSS样式表中定义:hover状态下的样式。比如,如果要为一个class为"aa"的div元素定义:hover样式,可以使用如下的CSS代码: .aa:hover { background-color: yellow; } 需要注意的是,在CSS定义中,:hover伪类必须位于:link和:visited之后,以确保样式的生效。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [使IE6支持:hover效果使用li:hoverdiv:hover](https://download.csdn.net/download/weixin_38591011/13676124)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [关于CSS :hover选择器的用法(控制子元素样式、控制同级元素样式)](https://blog.csdn.net/start_sea/article/details/119415255)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值