How to Write a:hover in Inline CSS?

Last Updated : 11 Jun, 2025

The :hover pseudo-selector in CSS enables you to modify the style of elements when a user hovers their mouse over them. This selector is widely used to improve user experience by adding visual feedback on elements like buttons, links, images, or any interactive items on a webpage.

For the :hover effect to work consistently across all elements and browsers, ensure your document includes a <!DOCTYPE html> declaration for full compatibility.

Example 1: Hover Effects with JavaScript (Inline Event Handlers)s

Although you cannot directly use :hover in inline CSS, you can simulate a hover effect with JavaScript by utilizing the onmouseover and onmouseout event handlers. Here’s how you can do it:

html

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            text-align: center;
        }

        a {
            text-decoration: none;
            color: green;
        }
    </style>
</head>

<body>
    <h2>a:hover in inline CSS</h2>
  
    <a href="#" onMouseOver="this.style.color='red'"
        onMouseOut="this.style.color='green'">
        GeeksforGeeks
    </a>
</body>

</html>

Output

output

Explanation:

Inline CSS is used for the initial color (color: green) applied to the link.
The onMouseOver and onMouseOut attributes in the anchor (<a>) tag are JavaScript event handlers that change the color of the link when the user hovers over it and when the mouse moves away.

Example 2: Hover Effects Using CSS

While JavaScript is a useful way to manipulate styles, the recommended approach for hover effects is to use CSS. You can apply the :hover pseudo-class in internal or external CSS.

html

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            text-align: center;
        }

        a {
            text-decoration: none;
            color: green;
        }

        /* CSS hover effect */
        a:hover {
            color: red;
        }
    </style>
</head>

<body>
    <h2>a:hover in inline CSS</h2>
  
    <a href="#">GeeksforGeeks</a>
</body>

</html>

Output

output

Explanation:

This example uses CSS to apply the hover effect. When the user hovers over the link (<a>), the text color changes to red.
The a:hover selector is the correct way to handle hover effects using CSS, separating the presentation layer (CSS) from the structure (HTML).

Conclusion

In conclusion, while inline CSS cannot directly apply the :hover pseudo-class, JavaScript can simulate hover effects. However, using CSS (internal or external) is the best practice for hover effects, as it ensures cleaner, more maintainable code and better separation between structure and presentation.

M

manaschhabra2

Improve

Article Tags :

Similar Reads

How to style icon color, size, and shadow by using CSS ?

Styling an icon's color, size, and shadow in CSS involves setting the color property for the icon's color, adjusting its size with font-size or width/height, and applying box-shadow or text-shadow for visual depth effects.When using Font Awesome, adding icons is simple and requires no downloads or i

How to set multiple background images using CSS?

The multiple background images for an element can be put in the HTML page using CSS. Use CSS background property to add multiple background images for an element in any pattern and use other CSS property to set the height and width of the images. The used background property are listed below: backgr

CSS Preprocessor SASS

Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that enhances standard CSS by introducing features like variables, nesting, imports, mixins, and inheritance, all while maintaining compatibility with all CSS versions.Key Features of Sass:Variables: Store reusable values such as colors

CSS Website Layout

CSS website layout divides a webpage into multiple sections like header, navigation bar, content area, and footer, making it easier to organize content and build the site.1. Header SectionThe header is the top section of a webpage, typically containing the website's name or logo.html<html>

How to make div not larger than its contents using CSS?

There are three ways to achieve this problem: By default case Using inline-block property Using fit-content property in width and height Default Case: In HTML div is by default fit to content inside it. The example goes like this: Example 1: html <!DOCTYPE html> <html lang = "en"

Building Tooltip using CSS

A Tooltip provides users with additional information about an element when the mouse pointer hovers over it. For example, when a user hovers over a button labeled "GeeksForGeeks," additional information such as "A Computer Science Portal" can appear as a tooltip.Tooltip PositionsTooltips can be posi

How to Set Background Color Opacity without Affecting Text in CSS?

Here are two approaches to set a background color with opacity in CSS without affecting the text.1. Using RGBA color valuesTo set the opacity only to the background color and not the text inside it we can use RGBA color values instead of the opacity property. Because using the opacity property can c

Transition shorthand with multiple properties in CSS?

The transition shorthand in CSS allows specifying multiple properties for smooth transitions between different states or values. The transition property in CSS is used to create transitions in an element, enabling changes to occur smoothly over a specified duration. This article demonstrates how to

How to prevent line breaks in the list of items using CSS?

The display:inline-block property is used to show an element in the inline-level block container. It converts the block of elements into an inline element. Use height and width property to set an inline element. The display property is used to prevent a line break of a list of items. Syntax: element

How to remove the space between inline-block elements?

To remove space between inline-block elements in CSS, ensure no whitespace or line breaks exist in HTML between elements. Alternatively, set the font-size of the parent to 0 and reset for elements, or apply a negative margin to elements. This ensures elements align seamlessly without unwanted spacin