zoukankan      html  css  js  c++  java
  • 鼠标指针移入移出改变图片透明度

     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      900px;
    14     margin: 0 auto;
    15     margin-top: 250px;
    16 }
    17 #qwer li{
    18     float:left;
    19     150px;
    20     height:150px;
    21     border:1px solid black;
    22 }
    23 li img{
    24     float:left;
    25     opacity:0.2;
    26     cursor: pointer;
    27      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.onload=function(){
    47     var qwe=document.getElementsByTagName("li");
    48     for (var i=0;i<qwe.length;i++){
    49         qwe[i].onmouseover=function(){
    50             this.className="current";
    51         }
    52         qwe[i].onmouseout=function(){
    53             this.className="";
    54         }
    55     }
    56 
    57 }
    58 </script>
    59 </body>
    60 </html>
  • 相关阅读:
    Linux文件编辑器 vi
    Sudo 和 Root 帐号
    Linux基本命令篇的习题解答
    Linux应用篇
    VMware中虚拟机网卡的四种模式
    Ubuntu游戏集合
    Linux与Window文件共享
    Linux知识点滴II
    [转载][翻译]jQuery Mobile教程创建一个订餐web应用(下)
    在WPF中创建带有刻度线的滑动条
  • 原文地址:https://www.cnblogs.com/1rookie/p/5824219.html
Copyright © 2011-2022 走看看