CSS static filter + a:hover effect
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml> <pead> <!--Author:hutia--<meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>wu xin</title> <style> * {margin:0px; padding:0px;} . i1 {width:64px; border:0px none #888; margin:0px;} . a0 {Filter:gray () Alpha (opacity=40); display:block; height:64px; width:64px;} . A0:hover,. a0:active {Filter:alpha (opacity=100); display:block; height:64px; width:64px;} . A1 {border:1px solid #999;}. a1:hover {border:1px solid gold;} . a2 {border:1px solid #999;}. a2:hover {border:1px solid green;} . a3 {border:1px solid #999;}. a3:hover {border:1px solid blue;} . a4 {border:1px solid #999;}. a4:hover {border:1px solid red;} . a5 {border:1px solid #999;}. a5:hover {border:1px solid silver;} . a6 {border:1px solid #999;}. a6:hover {border:1px solid black;} . A7 {Border: 1px solid #999; }. a7:hover {border:1px solid #FEE;} </style> </pead> <body> </body> </ Html>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
and then with the two lines JS, made such that, still IE only
STEP2:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml> <pead> <!--Author:hutia--<meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>wu xin</title> <style> * {margin:0px; padding:0px;} #main {height:198px; width:66px; overflow:hidden;} . i1 {width:64px; border:0px none #888; margin:0px;} . a0 {Filter:gray () Alpha (opacity=40); display:block; height:64px; width:64px;} . A0:hover,. a0:active {Filter:alpha (opacity=100); display:block; height:64px; width:64px;} . A1 {border:1px solid #999;}. a1:hover {border:1px solid gold;} . a2 {border:1px solid #999;}. a2:hover {border:1px solid green;} . a3 {border:1px solid #999;}. a3:hover {border:1px solid blue;} . a4 {border:1px solid #999;}. a4:hover {border:1px solid red;} . a5 {border:1px solid #999;}. a5:hover {border:1px solid silver;} . a6 {border:1px solid #999; }. a6:hover {border:1px solid black;} . A7 {border:1px solid #999;}. a7:hover {border:1px solid #FEE;} </style> </pead> <body> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
continue to work hard, plus magnetic effects ..... Is the test for a long time will see the dizziness ....
STEP3:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml> <pead> <!--Author:hutia--<meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>wu xin</title> <style> * {margin:0px; padding:0px;} #main {height:198px; width:66px; overflow:hidden;} . i1 {width:64px; border:0px none #888; margin:0px;} . a0 {Filter:gray () Alpha (opacity=40); display:block; height:64px; width:64px;} . A0:hover,. a0:active {Filter:alpha (opacity=100); display:block; height:64px; width:64px;} . A1 {border:1px solid #999;}. a1:hover {border:1px solid gold;} . a2 {border:1px solid #999;}. a2:hover {border:1px solid green;} . a3 {border:1px solid #999;}. a3:hover {border:1px solid blue;} . a4 {border:1px solid #999;}. a4:hover {border:1px solid red;} . a5 {border:1px solid #999;}. a5:hover {border:1px solid silver;} . a6 {border:1px solid #999; }. a6:hover {border:1px solid black;} . A7 {border:1px solid #999;}. a7:hover {border:1px solid #FEE;} </style> </pead> <body> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
the last effect mouse move quickly will be very dizzy ... and made a magnetic effect.
STEP4:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml> <pead> <!--Author:hutia--<meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>wu xin</title> <style> * {margin:0px; padding:0px;} #main {height:198px; width:66px; overflow:hidden;} . i1 {width:64px; border:0px none #888; margin:0px;} . a0 {Filter:gray () Alpha (opacity=40); display:block; height:64px; width:64px;} . A0:hover,. a0:active {Filter:alpha (opacity=100); display:block; height:64px; width:64px;} . A1 {border:1px solid #999;}. a1:hover {border:1px solid gold;} . a2 {border:1px solid #999;}. a2:hover {border:1px solid green;} . a3 {border:1px solid #999;}. a3:hover {border:1px solid blue;} . a4 {border:1px solid #999;}. a4:hover {border:1px solid red;} . a5 {border:1px solid #999;}. a5:hover {border:1px solid silver;} . a6 {border:1px solid #999; }. a6:hover {border:1px solid black;} . A7 {border:1px solid #999;}. a7:hover {border:1px solid #FEE;} </style> </pead> <body> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
And then add some do not know the so-called special effects, let this thing a little dynamic (fture: see My dynamic light wave, bbbbb ... ） -_-
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml> <pead> <!--Author:hutia--<meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>wu xin</title> <style> * {margin:0px; padding:0px;} #main {height:198px; width:66px; overflow:hidden;} #pointer {display:none; position:absolute; width:3px; overflow:hidden;} . i1 {width:64px; border:0px none #888; margin:0px;} . a0 {Filter:gray () Alpha (opacity=40); display:block; height:64px; width:64px;} . A0:hover,. a0:active {Filter:alpha (opacity=100); display:block; height:64px; width:64px;} . A1 {border:1px solid #999;}. a1:hover {border:1px solid gold;} . a2 {border:1px solid #999;}. a2:hover {border:1px solid green;} . a3 {border:1px solid #999;}. a3:hover {border:1px solid blue;} . a4 {border:1px solid #999;}. a4:hover {border:1px solid red;} . a5 {border:1pxSolid #999; }. a5:hover {border:1px solid silver;} . a6 {border:1px solid #999;}. a6:hover {border:1px solid black;} . A7 {border:1px solid #999;}. a7:hover {border:1px solid #FEE;} </style> </pead> <body> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
