In this tutorial, you will learn how to get id of an HTML element on hover using jQuery. You need to hover over the HTML element to get its id using the jQuery.

You can get id for the single element and the multiple elements using the same script for both. The script gets the id for the mouse hover element in the alert message of the browser.

Below are the two examples, first contains the single div element to get the id and the second contains the multiple list items to get the id. You can also use the CSS to give some styling to the element for which you want to get the id on hover.

How to Get Id of an HTML Element on Hover Using jQuery

If you want to get the id of the single HTML element on hover, you have to use the mouseover property of jQuery. Inside the mouseover property, you can use the jQuery this selector to get the hovered element id.

Output

Hover me to Get My Id.

The above example contains a single HTML element which appears as a box. If you want to get the id of the above-given box, you have to hover over the box. On hover event, you will get the id of the above box in the alert message.

You can use the same script to get the id for the multiple HTML elements.

Get Id of Multiple Element on Hover Using jQuery

The below example contains multiple boxes with different background color using the CSS background property. Here, the script is the same as the script we have used in the single element example given above. The above example script also works or the multiple HTML elements to get id on hover.

Output

  • Hover me to Get My Id.
  • Hover me to Get My Id.
  • Hover me to Get My Id.
  • Hover me to Get My Id.

Hover over any of the above-given boxes to get its id in the alert message box. You will get a different id for each box when you hover on them.

Hope you like the tutorial, if you have any query regarding the tutorial. Feel free to comment below in the comment box.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.