浏览器对css 伪类 hover的支持

2024-05-20 12:26:04

今天在调试的时候，发现用hover写的样式在火狐上可以，在ie上却不行，百度了下，原来我用的是ie的Quirks模式。

这是在http://www.w3help.org网站上查到的结果。

问题描述

IE6 IE7(Q) IE8(Q) 不支持 A 元素以外的其他元素的 ':hover' 伪类。

造成的影响

在非 A 元素上使用了 ':hover' 伪类后，可能会使页面在 IE6 IE7(Q) IE8(Q) 中没有的任何效果。

受影响的浏览器

IE6 IE7(Q) IE8(Q)

问题分析

对于此问题，我们通过以下的测试用例来说明。

分析以下代码：

<style type="text/css">p:hover {color: red;}
</style>
<p>Aloha!</p>

根据 CSS2.1 规范中的描述可知，当鼠标悬停在 P 元素上时，P 中的字体会变成红色。

这段代码在不同的浏览器环境中的表现（鼠标悬停在 'Aloha!' 上的时候）：

IE6 IE7(Q) IE8(Q)	IE7(S) IE8(S) Firefox Opera Safari Chrome

所以对于 ':hover' 伪类的支持情况，如下表：¹

IE6	IE7(Q)	IE7(S)	IE8(Q)	IE8(S)	Firefox	Safari	Opera	Chrome
N	N	Y	N	Y	Y	Y	Y	Y

注1：实际中其他除常用 HTML 标记（A 标记除外）同样适用此例，并非仅 P 标记自身不支持。

解决方案

使用 JavaScript 绑定 'onmouseover' 和 'onmouseout'（模仿 ':hover'）；
使用 Whatever:hover，该组件利用 IE 特有的 CSS 行为（behavior）及通过 JavaScript 来模拟 ':hover' 伪类的效果。

转载于:https://www.cnblogs.com/onlywujun/archive/2013/05/17/3083392.html

浏览器对css 伪类 hover的支持相关推荐

浏览器展示CSS伪类的动画和过渡效果应用
题记:写这篇博客要主是加深自己对浏览器展示的认识和总结实现算法时的一些验经和训教,如果有错误请指出,万分感谢. 日期:2013-5-26 起源:GBin1.com 在线演示今天我们分享来自着名前端 ...
css中的伪类on,【javascript/css】关于鼠标事件onmousexxx和css伪类hover
在运用鼠标移入移出事件时,一般有两种做法,一种是DOM事件的"onmouseover"和"onmouseout",还有一种是css的伪类":hover ...
CSS 伪类选择器详解：为网页添加交互与美感
介绍 CSS 伪类选择器是一种非常有用的 CSS 选择器,它能够根据元素的状态.位置或其他属性来选择元素并应用样式.伪类选择器的语法为 :pseudo-class,其中 pseudo-class 是一 ...
css伪类选择器，:link、:visited、:focus、:hover、:active、:first-child
全栈工程师开发手册 (作者:栾鹏) css系列教程1-选择器全解 css伪类选择器伪类选择器用于表达在某种状态下的元素. 包括:link.:visited.:focus.:hover.:active ...
CSS 伪类选择器：如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
CSS 伪类(Pseudo-classes)
CSS伪类是用来添加一些选择器的特殊效果. 语法伪类的语法: selector:pseudo-class {property:value;} CSS类也可以使用伪类: selector.class: ...
css伪类与伪元素的区别
css伪类与伪元素的区别 1.伪类(pseudo-classes) 2.伪元素(Pseudo-elements) 3.伪类与伪元素的区别 1.伪类(pseudo-classes) 其核心就是用来选择D ...
使用css伪类选择器,css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字实例说明 :link a:link 选择所 ...
HTML转义字符 Unicode和CSS伪类介绍
CSS 伪类用于向某些选择器添加特殊的效果. a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ ...

最新文章

热门文章