BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl

jQuery mouseenter() Method

Last Updated: April 28, 2019 by Chaitanya Singh | Filed Under: jQuery

jQuery mouseenter() Method attaches the mouse enter event handler function to an html element. This event handler function executes when mouse pointer enters the attached html element.

jQuery mouseenter() Method Syntax

$(selector).mouseenter(function(){
    //mouse enter event handler function code. This code 
    //executes when mouse enters the selected html elements
});

Here $(selector) is a jQuery selector that selects the html elements and the mouseenter() method attaches the mouse enter event handler function to these selected elements. This makes this event to trigger when the mouse pointer enters on these selected html elements.

jQuery mouseenter() Example

In the following example we have two paragraphs but we want the mouseenter event to trigger only for the second paragraph so we have assigned an id to the second paragraph and we have attached the mouseenter event handler function to the id selector that has the second paragraph id. Which means the event will only trigger when mouse pointer enters over the second paragraph.

In the event handler function we are hiding the selected element using slideUp() method which makes the selected element to gradually disappear with a slide up effect.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#para").mouseenter(function(){
    $(this).slideUp();
  });
});
</script>
</head>
<body>

<h2>jQuery mouseenter event example</h2>
<p>This example is published on beginnersbook.com.</p>
<p id="para">This paragraph will be hidden with a slideup effect when
mouse pointer enters on this paragraph.</p>
<button>Button</button>
</body>
</html>

Output:
Before mouse pointer enters over the paragraph with “para” id:
jQuery mouseenter
After mouse pointer enters over the paragraph with “para” id:
jQuery mouseenter example

❮ PreviousNext ❯

Top Related Articles:

  1. jQuery html() method
  2. jQuery Sliding Effects
  3. jQuery mouseup() Method
  4. jQuery dblclick() Method
  5. jQuery mousedown() Method

About the Author

I have 15 years of experience in the IT industry, working with renowned multinational corporations. Additionally, I have dedicated over a decade to teaching, allowing me to refine my skills in delivering information in a simple and easily understandable manner.

– Chaitanya

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()
  • jQuery addClass()
  • jQuery hasClass()
  • jQuery removeClass()
  • jQuery toggleClass()
  • jQuery after()
  • jQuery before()
  • jQuery append()
  • jQuery appendTo()
  • jQuery clone()
  • jQuery insertBefore()
  • jQuery insertAfter()
  • jQuery attr()
  • jQuery text()
  • jQuery val()
  • jQuery css()
  • jQuery prepend()
  • jQuery remove()
  • jQuery empty()
  • jQuery detach()

Copyright © 2012 – 2025 BeginnersBook . Privacy Policy . Sitemap