The hover effect alters the appearance of an element when interacted with using a mouse. When the mouse hovers over the element, additional style properties are applied. Conversely, when the mouse moves away from the element, these style properties are reverted back.
The hover attributes are applied to the element through inline CSS. In-line hover functionality is implemented within the onMouseOut and onMouseOver event handlers. Functions can be integrated using inline attributes or script tag actions.
Syntax
The provided syntax is employed to implement inline hover effects in CSS.
<element onMouseOver = "this.style.color='yellow'"
onMouseOut = "this.style.color='red'">
Information
</element>
Examples
The subsequent instances demonstrate the inline hover functionalities.
Example 1
The upcoming instance illustrates inline CSS for hover effects. By utilizing the mouse out and mouse over functions, we can modify the color. This hover effect is applicable to both links and input tags.
<!DOCTYPE html>
<html>
<head>
<title> How to write inline hover in css </title>
<style>
body {
text-align: center;
background-color: lightgrey;
}
a {
text-decoration: none;
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<h3> How to write inline hover in css </h3>
<h4> We can use the inline hover in css with the style function </h4>
<form>
<label for = "first_name"> First Name: </label>
<input type = "text" id = "first_name" name = "first_name" placeholder = "Write First Name" onMouseOver = "this.style.background='orange'"
onMouseOut = "this.style.background='white'">
</form>
<br>
<a href = "#"
onMouseOver = "this.style.color='yellow'"
onMouseOut = "this.style.color='red'">
C# Tutorial Website
</a>
</body>
</html>
Output
The output shows the inline hover css.
Example 2
The provided demonstration illustrates inline CSS for hover effects. By utilizing the mouse out and mouse over functions, we can modify behaviors, appearance, and layout. This hover effect is applied to both the link and input elements using inline and script tags.
<!DOCTYPE html>
<html>
<head>
<title> How to write inline hover in css </title>
<style>
body {
text-align: center;
background-color: lightgrey;
}
a {
text-decoration: none;
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<h3> How to write inline hover in css </h3>
<h4> We can use the inline hover in css with the script tag </h4>
<form>
<label for = "first_name"> User Name: </label>
<input type = "text" id = "first_name" name = "first_name" placeholder = "Write Name"
onmouseover = "mouseovers1()"
onmouseout = "mouseouts1()">
</form>
<br>
<a href = "#" id = "jtp"
onmouseover = "mouseovers()"
onmouseout = "mouseouts()">
C# Tutorial Website
</a>
<script>
function mouseovers() {
document.getElementById("jtp").style.color = "navy";
}
function mouseouts() {
document.getElementById("jtp").style.color = "red";
}
function mouseovers1() {
document.getElementById("first_name").style.backgroundColor = "yellow";
}
function mouseouts1() {
document.getElementById("first_name").style.backgroundColor = "white";
}
</script>
</body>
</html>
Output
The output shows the inline hover css.
Supported Browser
The following browsers are supported to the inline hover:
- Google Chrome
- Microsoft Edge
- Firefox
- Safari
- Opera
Conclusion
The inline hover feature in CSS allows for customization of the appearance of links or elements. It enhances the visual appeal, making it engaging, visually appealing, and contemporary for users. This functionality can be achieved using inline style attributes, functions, and necessary components.