1. 程式人生 > >className屬性的使用,當滑鼠移動到時背景顏色變為黃色,當滑鼠離開時變為藍色

className屬性的使用,當滑鼠移動到時背景顏色變為黃色,當滑鼠離開時變為藍色

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!--當滑鼠移動到時背景顏色變為黃色,當滑鼠離開時變為藍色-->
    <style>
         .over{background-color: yellow;}
         .out{background-color: blue;}
    </style>
    <script>
          function changeColorOver(id){
              id.className="over";
          }
          function changeColorOut(id){
              id.className="out";
          }
    </script>
</head>
<body>
      <p onmouseover="changeColorOver(this)" onmouseout="changeColorOut(this)">滑鼠移動事件</p>
</body>
</html>

未移動時:

滑鼠移動到時:

滑鼠離開時: