:hover - CSS: Cascading Style Sheets | MDN (2024)

The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

Try it

Styles defined by the :hover pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :visited, or :active) that has at least equal specificity. To style links appropriately, put the :hover rule after the :link and :visited rules but before the :active one, as defined by the LVHA-order: :link:visited:hover:active.

Note: The :hover pseudo-class is problematic on touchscreens. Depending on the browser, the :hover pseudo-class might never match, match only for a moment after touching an element, or continue to match even after the user has stopped touching and until the user touches another element. Web developers should make sure that content is accessible on devices with limited or non-existent hovering capabilities.

Syntax

Examples

Basic example

HTML

html

<a href="#">Try hovering over this link.</a>

CSS

css

a { background-color: powderblue; transition: background-color 0.5s;}a:hover { background-color: gold;}

Result

Specifications

Specification
HTML Standard
# selector-hover
Selectors Level 4
# the-hover-pseudo

Browser compatibility

BCD tables only load in the browser

See also

:hover - CSS: Cascading Style Sheets | MDN (2024)

FAQs

How to use hover in style CSS? ›

To create a hover effect in CSS, you first need to select the element you want to apply the effect to, and then add a :hover pseudo-class selector. Within the selector, you can define the styles that should apply when the element is hovered over.

Why can't i use hover in CSS? ›

The "button:hover" selector has less priority than the "#main button" selector and therefore the hover does not override the background-color attribute. To solve this you could add ! important to the CSS instructions in the :hover selector.

How do I change CSS when hovering? ›

To change the background color when hovering with CSS, you can use the :hover psuedo-class selector. This example will change the background color of an element from #0001 to #000F when it is hovered. For more information on psuedo-classes and hover effects, you can read here.

How do you hover content in CSS? ›

Using CSS you can create an effect that makes text appear to be "hovering" on the screen. To do this, you need to create two separate classes, one for when the mouse is hovering over the text (for example, when the mouse is hovering over a link on a page) and one for when the mouse is not hovering over the text.

How do you add a hover inside style? ›

To add a hover effect to a list elements in HTML, you can add the CSS property of :hover to the element.

How to use hover in style HTML? ›

To add a hovering effect in HTML, you can use the :hover pseudo-class selector. When the mouse pointer moves over the <div> , the background color will change from #3788AB to #AC3864.

What is the hover effect on a div? ›

To add a hover effect on a div in CSS, you can use the :hover selector. In this example, when the user hovers over a div element, the background color will change to blue and the text color will change to white.

What does CSS stand for? ›

CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages (HTML or XML). This language contains coding elements and is composed of these “cascading style sheets” which are equally called CSS files (. css).

How do I hover and change an image in CSS? ›

You can use the background-image property in CSS to change an image on hover. This approach involves setting a background image for a block-level element (like a div or button ) and changing it when the user hovers over that element.

What is the hover button in CSS? ›

The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

How do I make a div hover? ›

To display div element using CSS on hover a tag:
  1. First, set the div element invisible i.e display:none;.
  2. By using the adjacent sibling selector and hover on a tag to display the div element.
Sep 29, 2022

How do I show hover CSS in Chrome? ›

How to Use It?
  1. Open Chrome DevTools: Right-click on the page element you want to inspect and select “Inspect” or use Ctrl+Shift+I / Cmd+Opt+I .
  2. Navigate to the Sources Tab: In DevTools, navigate to the “Sources” tab.
  3. Trigger the State: Hover over the element or trigger the popover on the webpage so it's displayed.
Sep 3, 2023

Top Articles
Latest Posts
Article information

Author: Lilliana Bartoletti

Last Updated:

Views: 6465

Rating: 4.2 / 5 (53 voted)

Reviews: 84% of readers found this page helpful

Author information

Name: Lilliana Bartoletti

Birthday: 1999-11-18

Address: 58866 Tricia Spurs, North Melvinberg, HI 91346-3774

Phone: +50616620367928

Job: Real-Estate Liaison

Hobby: Graffiti, Astronomy, Handball, Magic, Origami, Fashion, Foreign language learning

Introduction: My name is Lilliana Bartoletti, I am a adventurous, pleasant, shiny, beautiful, handsome, zealous, tasty person who loves writing and wants to share my knowledge and understanding with you.