Last Updated on August 31, 2022 by Roshan Parihar
In this tutorial, you will learn how to get id of an element on hover using jQuery. The short answer is to use the mouseover() with this.id to access the id of the element.
You can get the id for the single element and the multiple elements using the same script for both. Below are the examples, first two methods contain the single div element to get the id. The last method contains multiple list items to get the id.
So, let’s start the tutorial with the examples and different methods given below.
Method 1: How to Get Id of an Element on Hover Using jQuery mouseover and this.id
If you want to get the id of the single HTML element on hover, you have to use the mouseover() function of jQuery. Inside this function, you can use the jQuery this.id to access the id of the element.
|
1 2 3 4 5 6 7 8 |
<script> $(document).ready(function(){ $('div').mouseover(function() { alert("My id is: "+this.id); }); }); </script> <div id="Firstdiv">Hover me to Get My Id.</div> |
Output
The above example contains a single HTML element that appears as a box. If you want to get the id of the above-given box, you have to hover over the box. On the hover event, you will get the id of the above box in the alert message.
Method 2: Using mouseover() and attr() Functions of jQuery to Get the ID of an Element
To get the id of the element on hover, you can use the jQuery mouseover() function that takes a single argument as a code snippet. This code will work when someone hovers over the element. The code that comes inside the function is $(this).attr('id') that find out the id attribute of the hovered element.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('div').mouseover(function() { myelementID = $(this).attr('id'); alert("My id is: "+myelementID); }); }); </script> <div id="Seconddiv">Hover me to Get My Id.</div> |
Output
Take your mouse to the above content to get its id in an alert message box. The above example works same as the previous example but uses the attr() to check the element id value.
Find Ids of Multiple Elements on Hover Using jQuery
The below example contains multiple boxes with different colors 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 on the multiple HTML elements to get the id on hover. You just have to add the same class to all the elements to get ids of them.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<style> .mymultiplediv{ padding: 25px 28px !important; margin: 10px; text-align: center; width: 180px; } #divone{ background:#ffd0a0; } #divtwo{ background:#fd9999; } #divthree{ background:#a3ffa3; } #divfore{ background:#a3f6ff; } </style> <script> $(document).ready(function(){ $('.mymultiplediv').mouseover(function() { alert("My id is: "+this.id); }); }); </script> <ul class="list-inline"> <li class="mymultiplediv" id="divone">Hover me to Get My Id.</li> <li class="mymultiplediv" id="divtwo">Hover me to Get My Id.</li> <li class="mymultiplediv" id="divthree">Hover me to Get My Id.</li> <li class="mymultiplediv" id="divfore">Hover me to Get My Id.</li> </ul> |
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 over them.
You May Also Like to Read
Thanks for the information.
I have a scenario where i want to click on any button or text box or text of a web page created by some one else(eg:flipkart,amazon etc..)and want to get the html code of that particular element.
Just like inspect element of chrome.Please help me on this