鼠标指针移入移出改变图片透明度

最新推荐文章于 2024-07-24 11:09:48 发布

weixin_34319817

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量365

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/1rookie/p/5824219.html

版权

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <title>Examples</title>
 7 <meta name="description" content="">
 8 <meta name="keywords" content="">
 9 <link href="" rel="stylesheet">
10 <style type="text/css">
11   
12 #qwer{
13     width: 900px;
14     margin: 0 auto;
15     margin-top: 250px;
16 }
17 #qwer li{
18     float:left;
19     width:150px;
20     height:150px;
21     border:1px solid black;
22 }
23 li img{
24     float:left;
25     opacity:0.2;
26     cursor: pointer;
27     width: 140px;
28     height: 140px;
29     margin: 5px 5px 5px 5px;
30 }
31 li.current img{
32     opacity:1;
33 }
34 
35 </style>
36 </head>
37 <body>
38 <ul id="qwer">
39     <li><img src="1.JPG"/></li>
40     <li><img src="1.JPG"/></li>
41     <li><img src="1.JPG"/></li>
42     <li><img src="1.JPG"/></li>
43     <li><img src="1.JPG"/></li>
44 </ul>
45 <script type="text/javascript">
46 window.οnlοad=function(){
47     var qwe=document.getElementsByTagName("li");
48     for (var i=0;i<qwe.length;i++){
49         qwe[i].οnmοuseοver=function(){
50             this.className="current";
51         }
52         qwe[i].οnmοuseοut=function(){
53             this.className="";
54         }
55     }
56 
57 }
58 </script>
59 </body>
60 </html>

转载于:https://www.cnblogs.com/1rookie/p/5824219.html

weixin_34319817

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
鼠标指针移入移出改变图片透明度

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>Examples</...
复制链接

扫一扫