CSS Media Features - Hover

CSS media feature hover is used to determines whether the user's device can be hover over the elements, such as moving a mouse cursor over a link or button.

Possible Values

  • none − The user's device (such as a touchscreen) does not have a pointing input mechanism that can be used to hover over elements.

  • hover − The user's device (browser) has a pointing input mechanism that can be used to hover over elements.

Syntax

hover: none|hover;

CSS hover - none Value

The following example demonstrates that when the user device does not support hovering, the button will always have a pink background and blue text −

<html>
<head>
<style>
   .hover-button {
      color: blue;
      background-color: pink;
      border: none;
      padding: 10px;
   }
   @media (hover: none) {
      .hover-button:hover {
         color: black;
         background-color: yellow;
      }
   }
</style>
</head>
<body>
   <button class="hover-button">Hover Me!</button>
</body>
</html>

CSS hover - hover Value

The following example demonstrates that when the user hovers over the button, the background color will change to yellow and the text color will change to black −

<html>
<head>
<style>
   .hover-button {
      color: blue;
      background-color: pink;
      border: none;
      padding: 10px;
   }
   @media (hover: hover) {
      .hover-button:hover {
         color: black;
         background-color: yellow;
      }
   }
</style>
</head>
<body>
   <button class="hover-button">Hover Me!</button>
</body>
</html>
Advertisements