Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to underline a Hyperlink on Hover using jQuery?
To underline a hyperlink on hover using jQuery, use the jQuery css() method. The text-decoration property is used to control the underlining effect.
The hover() method in jQuery allows you to specify functions that execute when the mouse enters and leaves an element. You can use this method along with css() to dynamically change the text decoration of hyperlinks.
Example
You can try to run the following code to learn how to underline a hyperlink on hover ?
<html>
<head>
<title>jQuery Hyperlink Decoration</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('a').hover(
function () {
$(this).css({"text-decoration":"underline"});
},
function () {
$(this).css({"text-decoration":"none"});
}
);
});
</script>
<style>
a {
text-decoration: none;
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<h3>Hover over the links below:</h3>
<p><a href="#">Demo Link 1</a></p>
<p><a href="#">Demo Link 2</a></p>
<p><a href="#">Demo Link 3</a></p>
</body>
</html>
In this example ?
- The CSS removes the default underline from all links using
text-decoration: none - The first function in
hover()adds underline when mouse enters the link - The second function removes underline when mouse leaves the link
- The
$(this)selector refers to the current link being hovered
Conclusion
Using jQuery's hover() and css() methods together provides an easy way to create interactive underline effects for hyperlinks, enhancing user experience with visual feedback.
Updated on: 2026-03-13T19:09:04+05:30
702 Views
Advertisements