小技巧-div上有连接效果

当你在做页面时，想给一个div或p等元素加链接，首先你会考虑到a标签，但是如果在此div内已经包含了多个a标签，你再在此div上套用a标签，是不符合标准的，所以考虑用onmouseover事件。

 

<div οnmοuseοver="this.style.cursor='pointer'"  οnclick="document.location='http://www.baidu.com';" >就是这个DIV，点点看。</div>

 

其中Http://www.baidu.com就是你链接到的网址。

       如果你想此div链接鼠标经过时背景或边框有所变化，可以通过hover来实现。
CSS代码如下：

1. div {
2.    width:300px;
3.    height:100px;
4.    color:#666;
5.    text-align:center;
6.    background:#ddd;
7.    border:1px solid #aaa;
8. }
9. div:hover,div.hover {
10.    color:#fff;
11.    background:#0099FF;
12.    border:1px solid #000;
13. }

这样当你鼠标经过这个div时，背景色和边框都会发生变化，但是此效果在IE6中不能得到效果，因为IE6不支持hover伪类。在上面CSS样式中:hover 是给非IE浏览器识别的，因为大多数非IE浏览器都已经支持任意标记的hover伪类了。.hover是给IE6以及以下版本识别的，因为IE6以及一下版本一直都只支持<A href="">标记的hover伪类(IE7已支持任意标记hover伪类效果)。

      为了让IE6也能得到hover效果，还需加入以下JS代码：

1. <script type="text/javascript">
2. <!-- // 让所有标记支持hover
3. function $(){
4.     if(document.all){ // 判断是否IE浏览器
5.         var obj=document.all;
6.         for(var i=0;i<obj.length;i++){
7.             obj[i].οnmοuseοver=function(){
8.                 this.className="hover"
9.             } ;
10.             obj[i].οnmοuseοut=function(){
11.                 this.className=""
12.             } 
13.         }
14.     }
15. }
16. $();
17. //-->
18. </script>