How to specify that an option-group should be disabled in HTML5 ?

How to run a code on hover event in jQuery ?

Last Updated : 31 May, 2023

In this article, we will see how to change the style of elements on hover event using jQuery. To change the style of hover event, hover() method is used. The hover() method is used to specify two functions to start when the mouse pointer moves over the selected element.

Syntax:

$(selector).hover(Function_in, Function_out);

Parameter: It accepts two parameters which are specified below-

Function_in: It specifies the function to run when the mouse move event occurs.
Function_out: It is optional and specifies the function to run when the mouse move out event occurs.

Here, we have created a paragraph element and when mouse move over the paragraph element, the style of element will change.

Example: In this example, we are using the above-explained method.

HTML

<!DOCTYpe html>
<html>
<head>
    <title>
        How to run a code on hover
        event in jQuery?
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
 
    <script>
        $(document).ready(function () {
            $(document).ready(function () {
                $("p").hover(function () {
                    $(this).css({
                        backgroundColor: "green",
                        fontSize: "30px",
                        color: "white"
                    });
                }, function () {
                    $(this).css("background-color", "yellow");
                });
            });
        });
    </script>
</head>
 
<body style="text-align: center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h3>
        How to run a code on hover event in jQuery?
    </h3>
    <p>Welcome to GeeksforGeeks</p>
</body>
</html>

Output:

How to specify that an option-group should be disabled in HTML5 ?

V

vkash8574

Improve

Article Tags :

Similar Reads

How to run a code on click event in jQuery ?

In this article, we will see how to run the code after clicking on an event. To run the code after clicking an event, we use the click() method. The click() method is used to run the code when a click event occurs. The click() method to attach a click event handler to selected elements. Inside the h

How to run a code on scroll event in jQuery?

In this article, we will discuss how to run the code when users scroll the content using jQuery. To run the code on scrolling the content, the scroll() method is used. The scroll() method is used to run the code when the user scrolls in the specified element. Syntax: $(selector).scroll(function)Para

How to run a code on mouseenter event in jQuery ?

In this article, we will see how to run the code when the mouse enters into the specific area using jQuery. To run the code on a mouse enter a specific area, mouseenter() method is used. The mouseenter() method works when the mouse pointer moves over the selected element. Syntax: $(selector).mouseen

How to run a code on document ready event in jQuery ?

In this article, we will see how to run a code when a page loads using jQuery. To run a code at page load time, we will use the ready() method. This method helps to load the whole page and then execute the rest code. This method specifies the function to execute when the DOM is fully loaded. Syntax:

How to run a code on double-click event in jQuery ?

In this article, we will see how to run a code after double clicked the element using jQuery. To run the code on double clicked we use dblclick() method. This method is used to trigger the double-click event to occur. This method occurs when the selected element will be double clicked. Syntax: $(sel

How to run code on mouseleave event in jQuery ?

In this article, we will see how to run the code when the mouse leaves into a specific area using jQuery. To run the code on a mouse leave into a specific area, the mouseleave() method is used. The mouseleave() method works when the mouse pointer leaves the selected element. Syntax: $(selector).mous

How to use .on and .hover in jQuery ?

jQuery .on() method: This method is used to attach an event listener to an element. This method is equivalent to the addEventListener in vanilla JavaScript. Syntax: $(element).on(event, childSelector, data, function) Parameter event: It specifies the event to attach (click, submit, etc.). childSelec

How to run the code on change event using jQuery ?

In this article, we will see how to run the code on change events using jQuery. The change event is used to trigger when the user changes the value of the element. Syntax: $(selector).change(function) Example: In the below example, we are creating a textarea element that contains GeeksforGeeks text.

How to unbind â€œhoverâ€ event using JQuery?

The problem unbind the hover effect of particular element with the help of JQuery. Here we are using 2 JQuery methods .unbind() and .off() method. Here are few techniques discussed. Approach: Select the element whose Hover effect needs to be unbinded.(Make sure Hover effect should be added by JQuery

How to make an element â€œflashâ€ in jQuery ?

In this article, we will create flashing elements using jQuery. To use jQuery you need to add jQuery CDN into your HTML document. The methods to create a flashing element are discussed below. Table of Content Using fadeIn() and fadeOut() MethodsUsing toggleClass() methodApproach 1: Using fadeIn() an