How to set styles to a webpage if the user's device input can hover over HTML elements using CSS?
Tags: css
Published: 2022-12-12 05:20:34

---
  title: How to set styles to a webpage if the user's device input can hover over HTML elements using CSS?
  published: true
  tags: CSS
  date: Mon Dec 12 2022 10:50:34 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/set-styles-to-webpage-if-users-device-can-hover-over-html-elements-using-css
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_4b139b69d5.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/set-styles-to-webpage-if-users-device-can-hover-over-html-elements-using-css)
  To set styles to the webpage if the user's device input can hover over the HTML elements using CSS, you can use the `@media` CSS rule and then use the `hover` media CSS feature with the value of `hover`. If the user's device input can hover over the HTML elements, then the CSS code block will be triggered and the styles will be applied to the webpage.

### TL;DR

```html
<!-- A simple webpage with a white `button` -->
<html>
  <style>
    /*
      Styles to apply when the user's device input has
      the ability to hover over the HTML elements
    */
    @media (hover: hover) {
      button {
        background-color: green;
      }
    }
  </style>
  <body>
    <button>Click me</button>
  </body>
</html>
```

For example, let's say we have a webpage with a `button` HTML element with a `white` background color.

The HTML for that would look something like this,

```html
<!-- A simple webpage with a white `button` -->
<html>
  <body>
    <button>Click me</button>
  </body>
</html>
```

The webpage now looks like this,

![webpage with a button having white background color](/uploads/Screenshot_2022_12_09_at_9_41_06_AM_353732f5ef.png)

Now let's change the background color of the `button` to a `green` color if the user's device primary input can hover over the `button` HTNL element. To do that first, we can use the `@media` CSS rule with the `hover` CSS media feature with the value of `hover`.

It can be done like this,

```html
<!-- A simple webpage with a white `button` -->
<html>
  <style>
    /* 
      Styles to apply when the user's device input has
      the ability to hover over the HTML elements
    */
    @media (hover: hover) {
      /* Styles goes here */
    }
  </style>
  <body>
    <button>Click me</button>
  </body>
</html>
```

Now let's select the `button` HTML elements and write the `background-color` CSS property with the value of `green` inside the `hover` CSS media feature code block.

It can be done like this,

```html
<!-- A simple webpage with a white `button` -->
<html>
  <style>
    /*
      Styles to apply when the user's device input has
      the ability to hover over the HTML elements
    */
    @media (hover: hover) {
      button {
        background-color: green;
      }
    }
  </style>
  <body>
    <button>Click me</button>
  </body>
</html>
```

The webpage now looks like this,

![webpage with a button having green background color](/uploads/Screenshot_2022_12_09_at_9_54_12_AM_bc67e96e52.png)

As you can see from the above code the `button` HTML element's background color is now changed to `green` color which proves that the `hover` CSS media feature is working as expected.

See the above code live in [codesandbox](https://codesandbox.io/s/set-styles-to-webpage-if-users-device-has-ability-to-hover-over-html-elements-using-css-jwzgl9?file=/index.html).

That's all 😃.