css hover伪类
:hover伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上，其他元素也可以处于悬停状态，在css2的定义中:hover伪类可以应用在全部元素上。
但是在ie6浏览器下面，只有链接标签a支持:hover伪类，对于ie6需要使用js，而ie7/ff/op/sa直接定义:hover即可。针对IE6浏览器不支持:hover伪类的解决方案JS源代码fixie6hover.js如下
var ie6 = /msie 6/i.test(navigator.userAgent)
, hoverClass = 'poptitle'//hover类样式名称
, ie6HoverClass='hover'//定义IE6下替换:hover伪类的样式名称
function BindEvent(o, evt, func) {
if (o.attachEvent) o.attachEvent('on' + evt, function (evt) { func.call(o, evt || window.event); });
else if (o.addEventListener) o.addEventListener(evt, func, false);
}
function fixHover() {
if (!ie6) return;
var elements = document.getElementsByTagName('*');
for (var i = 0, j = elements.length; i < j; i++) {
if (elements[i].className.indexOf(hoverClass) >= 0) {
BindEvent(elements[i], 'mouseover', IE6MouseEvent);
BindEvent(elements[i], 'mouseout', IE6MouseEvent);
}
}
}
function IE6MouseEvent(evt) {
if (evt.type == 'mouseover') this.className += ' ' + ie6HoverClass;
else this.className = this.className.replace(' ' + ie6HoverClass, '');
alert(this.className)
}
BindEvent(window, 'load', fixHover);
备注：css2中需要给html页面增加xhtml申明，将compatMode转换为CSS1Compat才行，非xhtml声明，怎为BackCompat，BackCompat不支持:hover。
下面的代码是html代码，根据IE中的条件注释判断是否导入JS文件
<!--[if lte IE 6]> <script type="text/javascript" language="Javascript" src="<strong>fixie6hover.js</strong>"></script> <![endif]-->
最终示例HTML代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
.poptitle{position:relative;}
.poptitle:hover,.hover{background:#666;color:White;}
.poptitle .tooltip{display:none;position:absolute;top:20px;border:solid 1px black;background:#fff;left:0px;width:160px;color:Black;z-index:100}
.poptitle:hover .tooltip{display:block;}
</style>
<a class="poptitle" href="/">A标签<span class="tooltip">Web开发网<br />Web开发网</span></a>
<br /><br />div+css自定义title显示位置<br />
div+css自定义title显示位置<br /><br />
<u class="poptitle" href="/">U标签，注意IE6只有a支持hover伪类<span class="tooltip">Web开发网<br />Web开发网</span></u>
<br /><br />div+css自定义title显示位置<br />div+css自定义title显示位置<br />div+css自定义title显示位置
<!--[if lte IE 6]>
<script type="text/javascript">
var ie6 = /msie 6/i.test(navigator.userAgent)
, hoverClass = 'poptitle'//hover类样式名称
, ie6HoverClass='hover'//定义IE6下替换:hover伪类的样式名称
function BindEvent(o, evt, func) {
if (o.attachEvent) o.attachEvent('on' + evt, function (evt) { func.call(o, evt || window.event); });
else if (o.addEventListener) o.addEventListener(evt, func, false);
}
function fixHover() {
if (!ie6) return;
var elements = document.getElementsByTagName('*');
for (var i = 0, j = elements.length; i < j; i++) {
if (elements[i].className.indexOf(hoverClass) >= 0) {
BindEvent(elements[i], 'mouseover', IE6MouseEvent);
BindEvent(elements[i], 'mouseout', IE6MouseEvent);
}
}
}
function IE6MouseEvent(evt) {
if (evt.type == 'mouseover') this.className += ' ' + ie6HoverClass;
else this.className = this.className.replace(' ' + ie6HoverClass, '');
alert(this.className)
}
BindEvent(window, 'load', fixHover);
</script>
<![endif]-->
加支付宝好友偷能量挖...
原创文章，转载请注明出处：css hover伪类