如何用jQuery改变鼠标进入和离开时段落的字体样式

以下是两个示例，演示如何使用jQuery改变鼠标进入和离开时段落的字体样式：

示例1：使用`.hover()`函数

以下是一个示例，演示如何使用.hover()函数来改变鼠标进入和离开段落的字体样式：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .hover() Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $("p").hover(function() {
        $(this).css("font-weight", "bold");
      }, function() {
        $(this).css("font-weight", "normal");
      });
    });
  </script>
  <style>
    p {
      font-size: 16px;
      font-weight: normal;
    }
  </style>
</head>
<body>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</body>
</html>

在这个示例中，我们使用.hover()函数为所有<p>元素附加了一个鼠标进入和离开事件处理程序。当鼠标进入一个段落时，该段落字体将变为粗体，当鼠标离开时，字体将恢复为正常。

示例2：使用`.mouseenter()`和`.mouseleave()`函数

以下是一个示例，演示如何使用.mouseenter()和.mouseleave()函数来改变鼠标进入和离开时段落的字体样式：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .mouseenter() andmouseleave() Function Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $("p").mouseenter(function() {
        $(this).css("font-style", "italic");
      });
      $("p").mouseleave(function() {
        $(this).css("font-style", "normal");
      });
    });
  </script>
  <style>
    p {
      font-size: 16px;
      font-style: normal;
    }
  </style>
</head>
<body>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</body>
</html>

在这个示例中，我们使用.mouseenter()和.mouseleave()函数为所有<p>元素附加了一个鼠标进入和离开事件处理程序。当鼠标进入一个段落时，该段落的字体将变为斜体，当鼠标离开时，字体将恢复为正常。

综上所述，我们可以使用.hover()函数或.mouseenter()和.mouseleave()函数来改变鼠标进入和离开时段落的字体样式，并提供了两个示例，演示如何使用这两个函数来实现这个功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何用jQuery改变鼠标进入和离开时段落的字体样式 - Python技术站

如何用jQuery改变鼠标进入和离开时段落的字体样式

示例1：使用.hover()函数

示例2：使用.mouseenter()和.mouseleave()函数

相关文章

示例1：使用`.hover()`函数

示例2：使用`.mouseenter()`和`.mouseleave()`函数