The “:hover” is the pseudo-selector which means it is recognized only in the CSS style sheet. Users are not allowed to apply CSS inline styles on hover. However, to add inline CSS on hover, it is better to give the element a class name or id and then use it in the stylesheet to apply styles or use JavaScript functions.
This write-up will instruct you to add CSS styles on hover using JavaScript.
How to Add CSS Styles on Hover?
There are no methods to use hover in inline CSS. However, to apply the hover effect on an element using its id, check out the given example.
Example
In HTML, add a div element having the class name “main-content”. Inside this div, add an “<h2>” element to specify the heading. After that, add the “<a>” element with some content that is specified with the attributes:
-
- “href” attribute specifies the link.
- “id” attribute is set to make it accessible to the CSS.
- Also specify the functions “mouse_over()” and “mouse_out()” in it. On mouse hover, these functions will trigger and invoke the function in JavaScript:
<h2>Add hover in inline CSS</h2>
<a href="#" id="hov" onmouseover="mouse_over()" onmouseout="mouse_out()">Linuxhint School!</a>
</div>
Let’s move on to the CSS section, where the HTML elements are provided with styling properties.
Style body Element
background-color: #863A6F;
}
The background color of the body element is set using the “background-color” property.
Style main-content div
width: 400px;
height: 100px;
background-color: #D989B5;
margin: auto;
padding: 20px;
border-radius: 10px;
}
The “.main-content ” refers to the class main-content, which is styled as follows:
-
- “width” property sets the HTML element’s width.
- “height” property defines the HTML element’s height.
- “background-color” property specifies the element’s background color.
- “margin” property sets the space across the element.
- “padding” property sets the space across the element’s content.
- “border-radius” property is utilized to round the element’s edges.
Style Element
font-size: 20px;
text-decoration: none;
padding: 10px;
}
The “<a>” element is styled by utilizing the following properties:
-
- “font-size” property specifies the element’s font size.
- “text-decoration” property with value none removes the underline from the text.
JavaScript
function mouseover() {
document.getElementById("hov").style.color = "yellow";
}
function mouseout() {
document.getElementById("hov").style.color = "white";
}
</script>
In the given JavaScript code:
-
- “<script>” tag is utilized to specify the script code.
- “function mouse_over()”: The function is the keyword to define the mouse_over() function.
- “document.getElementById(“hov”).style.color = “yellow”” takes the id “hov” of the <a> element as a parameter and sets its style color as yellow.
- “function mouse_out()” uses the “document.getElementById(“hov”).style.color = “white”” method to take the id “hov” of the “<a>” element as a parameter on which the style color is to be changed to white.
- “</script>” is the closing tag.
Here, you can see, on hover, the text color style changes to yellow, and when removed, the text color turns to white:
That’s the way to apply CSS styles on hover.
Conclusion
The “:hover” is the pseudo-selector which means only in CSS is it recognized. There exist no methods for adding inline CSS styles on hover. So, it is better to use JavaScript functions to specify the properties on mouse hover over an element. This post has demonstrated the method to add CSS styles on hover.
