Auckland

redmine 在linux上的自动启动 | 把controller分成group 之后 link_to出现奇 ...

2008-03-17

IE 6 中的hover问题

关键字: html

在IE 6中，只有<a></a>可以使用hover。
然而在IE 7和ff中，其他的element也可以使用hover。

不过，目前的客户他们还都徘徊在IE 6中呢。

怎么样解决IE 6中其他element的hover问题呢？
例如，一个div,一个table row 或者一个table gird。

不知道大家在这方面有没有什么经验可以传授。

07:42
浏览 (150)
评论 (5)
进入论坛
相关推荐

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="hover,PRcss,xhtml,html,css,js" />
<meta name="description" content="PRcss的个人主页,无聊的,神经的,懒惰的..." />
<meta name="Author" content="PRcss,qq:50198763" />
<meta name="Copyright" content="本页版权归PRcss所有。All Rights Reserved" />
<link rel="shortcut icon" href="http://www.pr1984.com/favicon.ico" />
<title>IE6:hover - www.pr1984.com</title>
<style type="text/css" media="screen"><!--
body { background:#fff; }
table { border:solid 1px #ccc; color:#ccc; }
table:hover,table.hover { border-color:#900; color:#333; }
ul li:hover,ul li.hover { background:#eee; }
--></style>
</head>
<body>
<table id="pr_table">
<tr><td>测试</td></tr>
</table>

<ul id="pr_nav">
<li>测试</li>
</ul>

<script type="text/javascript">
// 浏览器版本判断
var Client = {
    Engine: {'name': 'unknown', 'version': ''},
    Features: {}
};
Client.Features.xhr = !!(window.XMLHttpRequest);
Client.Features.xpath = !!(document.evaluate);
if (window.opera) Client.Engine.name = 'opera';
else if (window.ActiveXObject) Client.Engine = {'name': 'ie', 'version': (Client.Features.xhr) ? 7 : 6};
else if (!navigator.taintEnabled) Client.Engine = {'name': 'webkit', 'version': (Client.Features.xpath) ? 420 : 419};
else if (document.getBoxObjectFor != null) Client.Engine.name = 'gecko';
Client.Engine[Client.Engine.name] = Client.Engine[Client.Engine.name + Client.Engine.version] = true;

<!-- // 获取单个对象
function $1(e){
    var pr=document.getElementById(e);
    pr.onmouseover=function(){
        this.tmpClass=this.className;
        this.className+=" hover";
    }
    pr.onmouseout=function(){
        this.className=this.tmpClass;
    }
}
if(Client.Engine.ie6){
    $1("pr_table");
}

// 获取多个子对象
function $2(e){
    var pr=document.getElementById(e).getElementsByTagName("li");
    for(var i=0;i<pr.length;i++){
        pr[i].onmouseover=function(){
            this.tmpClass=this.className;
            this.className+=" hover";
        }
        pr[i].onmouseout=function(){
            this.className=this.tmpClass;
        }
    }
}
if(Client.Engine.ie6){
    $2("pr_nav");
}

// 让所有标记支持hover
function $(){
    var obj=document.all;
    for(var i=0;i<obj.length;i++){
        obj[i].onmouseover=function(){
            this.tmpClass=this.className;
            this.className+=" hover";
        }
        obj[i].onmouseout=function(){
            this.className=this.tmpClass;
        }
    }
}
if(Client.Engine.ie6){
    //$();
}
//-->
</script>
</body>
</html>

catoc 2008-03-17

通常是用 mouseover 模拟处理，有些 js 框架自动解决了这些问题，你可以 google IE7 js