IE 6 中的hover问题

Auckland

浏览: 29716 次
性别:
来自: 新西兰

最近访客更多访客>>

welss

只唐瑞

tomhat

鬼王的忧伤

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (16)

社区版块

存档分类

IE Opera jQuery webkit Google

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

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

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

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

分享到：

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

2008-03-17 07:42
浏览 1628
评论(5)
论坛回复 / 浏览 (5 / 5197)
查看更多

5 楼 Auckland 2008-03-18

hax 写道

上面的代码大意是正确的，但是太粗糙了。我以前写过一个，不过现在一时找不到了。

上面的代码只是个例子而已。实际应用时的代码并没有这么多。
不知道你还能不能找到你自己写的那份，让大家分享一下。

4 楼 fins 2008-03-18

是不是利用css selector来取得元素然后注册over out事件更好呢

如果用jquery来实现代码应该清爽很多吧

3 楼 hax 2008-03-17

上面的代码大意是正确的，但是太粗糙了。我以前写过一个，不过现在一时找不到了。

2 楼 Auckland 2008-03-17

catoc 写道

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

网上发现了这个http://blog.pr1984.com/article.asp?id=65
就是用js来解决这种问题的。

<!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>

1 楼 catoc 2008-03-17

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

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论