zoukankan      html  css  js  c++  java
  • 【前端开发系列】—— 通过鼠标浮动改变样式

    这个简单的demo,可以应用到很多地方。比如导航鼠标移动到上方时,可以改变样式,或者触发下拉框,等等。很有意思

     1 <html>
     2 <head>
     3 <style type="text/css">
     4     .red {
     5         color:red;
     6         font-size: 32;
     7         font-style: italic;
     8     }
     9     .blue {
    10         color: blue;
    11         font-size: 25;
    12     }
    13     .black {
    14         color: black;
    15         font-size: 16;
    16     }
    17 </style>
    18 
    19 <script type="text/javascript">
    20     function color(e){
    21         switch(e.srcElement.id){
    22             case "first":
    23                 document.getElementById("first").className = "red";
    24                 break;
    25             case "second":
    26                 document.getElementById("second").className = "blue";
    27                 break;
    28         }
    29     }
    30     function clearText(e){
    31         switch(e.srcElement.id){
    32             case "first":
    33                 document.getElementById("first").className = "black";
    34                 break;
    35             case "second":
    36                 document.getElementById("second").className = "black";
    37                 break;
    38         }
    39     }
    40 </script>
    41 </head>
    42 <body>
    43     <div id="first" onMouseOver="color(event);" onMouseOut="clearText(event);"> hello1 </div>
    44     <div id="second" onMouseOver="color(event);" onMouseOut="clearText(event);"> hello2 </div>
    45 </body>
    46 </html>

    样例展示

  • 相关阅读:
    记录一次电话面试
    记录一次git合并
    HTML通用属性与常见标签
    位运算的应用
    HTML总结
    前端MVC
    常用软件
    docker常用命令
    composer install(update)时出现killed
    优化小技巧:该怎么识别百度蜘蛛呢
  • 原文地址:https://www.cnblogs.com/xing901022/p/3987712.html
Copyright © 2011-2022 走看看