forked from zhangmengxue/Fragment
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path格子hover变色demo.html
124 lines (114 loc) · 2.62 KB
/
格子hover变色demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>格子hover变红demo</title>
<style type="text/css">
/*方法一开始*/
ul,li{
margin: 0;
padding:0;
}
ul li{
display: inline-block;
width: 55px;
height: 55px;
text-align: center;
line-height: 50px;
}
ul li a{
width: 50px;
height: 50px;
display: block;
text-decoration: none;
border: 5px #00f solid;
}
ul li a:hover{
position:relative;
z-index: 9999;
border: 5px red solid;
}
/*方法一结束*/
/*方法二开始*/
.test{
width:165px;
height:165px;
text-align: center;
border: 5px #00f solid;
border-right:none;
border-bottom:none;
}
.test a{
width:50px;
height:50px;
line-height: 50px;
display:block;
float:left;
border: 5px #00f solid;
border-left:none;
border-top:none;
position:relative;
text-decoration: none;
}
.test a:hover,.test .hover{
border: 5px red solid;
margin: -5px 0 0 -5px;
}
/*方法二结束*/
</style>
</head>
<body>
<!-- 第一种我自己搞出来的方法，哎，IE低版本会有排版问题 -->
<span>第一种方法：</span>
<ul class="row1">
<li><a href="#">1</a></li
><li><a href="#">2</a></li
><li><a href="#">3</a></li>
</ul>
<ul class="row2">
<li><a href="#">4</a></li
><li><a href="#">5</a></li
><li><a href="#">6</a></li>
</ul>
<ul class="row3">
<li><a href="#">7</a></li
><li><a href="#">8</a></li
><li><a href="#">9</a></li>
</ul>
<!-- <div>
我觉得实现这个有三点需要注意：
1.<li>之间的空白问题即使已经padding、margin为0了；
2.hover在ie6下只有a标签可以；
3.hover时候表框的显示
</div> -->
<br />
<br />
<br />
<!-- 比较完美的第二种方法，兼容ie低版本 -->
<span>第二种方法：</span>
<div id="test" class="test">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
</div>
<script type="text/javascript">
(function(){
var list = [0,1,2,5,8,7,6,3,4],
a = document.getElementById("test").getElementsByTagName("a"),
index= -1;
window.setInterval(function(){
index++;
a[list[index]].className = "hover";
index > 0 ? a[list[index-1]].className = "" : a[list[list.length-1]].className = "";
index == 8 ? index = -1 : null;
},500);
})();
</script>
</body>
</html>