css静态滤镜 + A:Hover 效果第1/3页

IE Only
Step1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <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></head><body> <div id="">     <a href="#" class="a0 a1"> <img src="https://ss.0133.cn/article/80/dd/54/80dd54d4432035a3e52c70dfe3022d15.jpg-600" class="i1"/></a><a href="#" class="a0 a2"> <img src="https://ss.0133.cn/article/7d/e7/15/7de71565bb2bc62dd5e05a559e816de5.jpg-600" class="i1"/></a><a href="#" class="a0 a3"> <img src="https://ss.0133.cn/article/8d/17/ee/8d17eeac64a4e1015da811cebd7e7c99.jpg-600" class="i1"/></a><a href="#" class="a0 a4"> <img src="https://ss.0133.cn/article/ca/1d/e9/ca1de950a0e07cf06d9585de8423bae0.jpg-600" class="i1"/></a><a href="#" class="a0 a5"> <img src="https://ss.0133.cn/article/f8/6d/0f/f86d0fd8ca1b7bb3e5c65312f3cea69a.jpg-600" class="i1"/></a><a href="#" class="a0 a6"> <img src="https://ss.0133.cn/article/f6/3a/bc/f63abc38cd8ac6b0f42a33d40cb0315b.jpg-600" class="i1"/></a><a href="#" class="a0 a7"> <img src="https://ss.0133.cn/article/61/db/ca/61dbca2dbeb0589dec40f90389088358.jpg-600" class="i1"/></a></div></body></html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

然后配合上两行 JS, 做成这样
依然 IE Only
Step2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <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></head><body> <div id="main" onmousemove="chkScroll(this);">     <a href="#" class="a0 a1"> <img src="https://ss.0133.cn/article/80/dd/54/80dd54d4432035a3e52c70dfe3022d15.jpg-600" class="i1"/></a><a href="#" class="a0 a2"> <img src="https://ss.0133.cn/article/7d/e7/15/7de71565bb2bc62dd5e05a559e816de5.jpg-600" class="i1"/></a><a href="#" class="a0 a3"> <img src="https://ss.0133.cn/article/8d/17/ee/8d17eeac64a4e1015da811cebd7e7c99.jpg-600" class="i1"/></a><a href="#" class="a0 a4"> <img src="https://ss.0133.cn/article/ca/1d/e9/ca1de950a0e07cf06d9585de8423bae0.jpg-600" class="i1"/></a><a href="#" class="a0 a5"> <img src="https://ss.0133.cn/article/f8/6d/0f/f86d0fd8ca1b7bb3e5c65312f3cea69a.jpg-600" class="i1"/></a><a href="#" class="a0 a6"> <img src="https://ss.0133.cn/article/f6/3a/bc/f63abc38cd8ac6b0f42a33d40cb0315b.jpg-600" class="i1"/></a><a href="#" class="a0 a7"> <img src="https://ss.0133.cn/article/61/db/ca/61dbca2dbeb0589dec40f90389088358.jpg-600" class="i1"/></a></div></body></html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

继续努力，加上磁性效果............就是测试久了会看的头晕.......

12 3 下一页阅读全文

以上就是css静态滤镜 + A:Hover 效果第1/3页的详细内容，更多请关注0133技术站其它相关文章！