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伪类

评论(0)Web开发网
阅读(242)喜欢(0)HTML/CSS兼容/XML