Skip to content
Related Articles

Related Articles

Improve Article

How to change the font styles of paragraphs on mouseenter and mouseleave using jQuery ?

  • Last Updated : 30 Jun, 2021

jQuery is one of the powerful libraries of JavaScript which has many powerful methods that make the manipulation of DOM much simpler using the selectors.

In this article, let us see different ways on how to change the font-weight and color of paragraphs on mouse enter and mouse leave using jQuery.

Approach: Using jQuery we can add many functionalities during the DOM events. We can add CSS animations like hide, show and many other effects using jQuery. 

We can add a class containing the CSS using addClass() method on the mouseenter event and remove the class using the removeClass() on mouseleave event by selecting p tag with selector. 

 



Method 1: Adding individual functions on mouseenter and mouseleave events.

Syntax:

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

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
  
    <!-- Including jQuery  -->
    <script src=
        integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous">
    </script>
      
    <style>
        h1 {
            color: #006600;
        }
  
        /* Changes the div's background 
        color to red */
        .adder {
            color: #006600;
            font-weight: bold;
        }
    </style>
</head>
  
<body>
    <h1>Geeks for Geeks</h1>
  
    <p>
        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.
    </p>
  
    <p>
        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.
    </p>
  
    <script>
        $(document).ready(function () {
            $("p").mouseenter(function () {
                $("p").addClass("adder");
            });
            $("p").mouseleave(function () {
                $("p").removeClass("adder");
            });
        });
    </script>
</body>
  
</html>

Output:

Method 2: Using on() method with multiple events.

Syntax:

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

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
  
    <!-- Including jQuery  -->
    <script src=
        integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous">
    </script>
  
    <style>
        h1 {
            color: #006600;
        }
  
        /* Changes the div's background 
        color to red */
        .adder {
            color: #006600;
            font-weight: bold;
        }
    </style>
</head>
  
<body>
    <h1>Geeks for Geeks</h1>
  
    <p>
        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.
    </p>
  
    <p>
        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.
    </p>
  
    <script>
        $(document).ready(function () {
            $("p").on({
                mouseenter: function () {
                    $("p").addClass("adder");
                },
                mouseleave: function () {
                    $("p").removeClass("adder");
                },
            });
        });
    </script>
</body>
  
</html>

Output:

Method 3: Applying CSS method on mouseenter and mouseleave events on the selected element.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
  
    <!-- Including jQuery  -->
    <script src=
        integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
        crossorigin="anonymous">
    </script>
  
    <style>
        h1 {
            color: #006600;
        }
  
        /* Changes the div's background 
        color to red */
        .adder {
            color: #006600;
            font-weight: bold;
        }
    </style>
</head>
  
<body>
    <h1>Geeks for Geeks</h1>
  
    <p>
        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.
    </p>
  
    <p>
        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.
    </p>
  
    <script>
        $(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" 
                    });
                },
            });
        });
    </script>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :