jQuery 隔行变色(奇偶数+this+mouseenter)

98 阅读1分钟
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="jquery-3.4.1.js"></script>
  <script>
    $(document).ready(function () {
      var jqLiOdd = $('li:odd');
      var jqLiEven = $('li:even');
      jqLiOdd.css('background', 'red');
      jqLiOdd.css('background', 'yellow');

      // 鼠标进入变色,移开恢复
      // 记录
      var color = '';
      $('li').mouseenter(function () {
        color = $(this).css('background');
        $(this).css('background', 'blue');
      })
      $('li').mouseleave(function () {
        $(this).css('background', color);
      })
    })
  </script>
</head>
<body>
  <ul>
    <li>dzm</li>
    <li>dzm</li>
    <li>dzm</li>
    <li>dzm</li>
    <li>dzm</li>
    <li>dzm</li>
  </ul>
</body>
</html>
  • demo 效果: