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= 
"https://code.jquery.com/jquery-3.6.0.min.js"
        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= 
"https://code.jquery.com/jquery-3.6.0.min.js"
        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= 
"https://code.jquery.com/jquery-3.6.0.min.js"
        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:

Suggest improvement

Explain the common methods of sending request to a server in jQuery

Difference between tilde ( ~ ) and caret ( ^ ) in package.json

Share your thoughts in the comments

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

HTML

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?