如何使用 jQuery 更改 mouseenter 和 mouseleave 段落的字体样式？

jQuery 是强大的 JavaScript 库之一，它具有许多强大的方法，可以使用选择器更简单地操作 DOM。

在本文中，让我们看看如何使用 jQuery 在鼠标进入和鼠标离开时更改段落的字体粗细和颜色的不同方法。

方法：使用 jQuery 我们可以在 DOM 事件期间添加许多功能。我们可以使用 jQuery 添加 CSS 动画，如隐藏、显示和许多其他效果。

我们可以添加含有使用addClass（）方法MouseEnter事件的CSS类和删除使用removeClass类（） 在 mouseleave 事件上通过选择p标签选择器。

方法 1：在 mouseenter 和 mouseleave 事件上添加单独的函数。

句法：

$('selector').eventname(function())

HTML

  

    
    
    
  
    
    
    
      
    
        h1 {
            color: #006600;
        }
  
        /* Changes the div's background 
        color to red */
        .adder {
            color: #006600;
            font-weight: bold;
        }
    

  

    Geeks for Geeks
  
    
        When compared with C++, Java codes are 
        generally more maintainable because Java 
        does not allow many things which may 
        lead bad/inefficient programming if used
        incorrectly. For example, non-primitives 
        are always references in Java. So we 
        cannot pass large objects(like we can do 
        in C++) to functions, we always pass
        references in Java. One more example, 
        since there are no pointers, bad memory 
        access is also not possible.
    
  
    
        Python is a high-level, general-purpose 
        and a very popular programming language.
        Python programming language (latest 
        Python 3) is being used in web development,
        Machine Learning applications, along with 
        all cutting edge technology in Software 
        Industry. Python Programming Language is 
        very well suited for Beginners, also for 
        experienced programmers with other 
        programming languages like C++ and Java.
    
  
    
        $(document).ready(function () {
            $("p").mouseenter(function () {
                $("p").addClass("adder");
            });
            $("p").mouseleave(function () {
                $("p").removeClass("adder");
            });
        });
    

  

输出：

方法二：使用on() 具有多个事件的方法。

句法：

$('selector').on({
    event1:function () {
        // Code
    },
    event2:function () {
        // Code
    }
})

HTML

  

    
    
    
  
    
    
    
  
    
        h1 {
            color: #006600;
        }
  
        /* Changes the div's background 
        color to red */
        .adder {
            color: #006600;
            font-weight: bold;
        }
    

  

    Geeks for Geeks
  
    
        When compared with C++, Java codes are
        generally more maintainable because Java
        does not allow many things which may
        lead bad/inefficient programming if used
        incorrectly. For example, non-primitives
        are always references in Java. So we
        cannot pass large objects(like we can do
        in C++) to functions, we always pass
        references in Java. One more example,
        since there are no pointers, bad memory
        access is also not possible.
    
  
    
        Python is a high-level, general-purpose
        and a very popular programming language.
        Python programming language (latest
        Python 3) is being used in web development,
        Machine Learning applications, along with
        all cutting edge technology in Software
        Industry. Python Programming Language is
        very well suited for Beginners, also for
        experienced programmers with other
        programming languages like C++ and Java.
    
  
    
        $(document).ready(function () {
            $("p").on({
                mouseenter: function () {
                    $("p").addClass("adder");
                },
                mouseleave: function () {
                    $("p").removeClass("adder");
                },
            });
        });
    

  

输出：

方法 3：对所选元素的mouseenter和mouseleave事件应用 CSS 方法。

HTML

  

    
    
    
  
    
    
    
  
    
        h1 {
            color: #006600;
        }
  
        /* Changes the div's background 
        color to red */
        .adder {
            color: #006600;
            font-weight: bold;
        }
    

  

    Geeks for Geeks
  
    
        When compared with C++, Java codes are
        generally more maintainable because Java
        does not allow many things which may
        lead bad/inefficient programming if used
        incorrectly. For example, non-primitives
        are always references in Java. So we
        cannot pass large objects(like we can do
        in C++) to functions, we always pass
        references in Java. One more example,
        since there are no pointers, bad memory
        access is also not possible.
    
  
    
        Python is a high-level, general-purpose
        and a very popular programming language.
        Python programming language (latest
        Python 3) is being used in web development,
        Machine Learning applications, along with
        all cutting edge technology in Software
        Industry. Python Programming Language is
        very well suited for Beginners, also for
        experienced programmers with other
        programming languages like C++ and Java.
    
  
    
        $(document).ready(function () {
            $("p").on({
                mouseenter: function () {
  
                    // Changing css on mouseenter event
                    $("p").css({ 
                        color: "#006600", 
                        "font-weight": "bold" 
                    });
                },
                mouseleave: function () {
  
                    // Changing css on mouseleave event
                    $("p").css({ 
                        color: "black", 
                        "font-weight": "normal" 
                    });
                },
            });
        });
    

  

输出：