CSS @media hover Property

Posted in CSS Tutorial

Updated on Oct 06, 2024

By Mari Selvan

👁️ 16 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The @media (hover) property in CSS is part of media queries and is used to detect whether the user’s input device supports hover capability.

This can be useful in determining how to style interactive elements like buttons and links, based on whether a device can hover or not. For example, desktop computers typically support hover, while touch devices like phones usually do not.

💡 Syntax

The @media (hover) property uses the following basic syntax:

Syntax

Copied

@media (hover: hover) {
  /* Styles for devices that support hover */
}

@media (hover: none) {
  /* Styles for devices that do not support hover */
}

hover: hover: Targets devices that support hover (like desktops).
hover: none: Targets devices that don’t support hover (like touchscreens).

🏠 Property Values

hover: Applies styles to devices that support hover interactions.
none: Applies styles to devices that do not support hover interactions.

🎛️ Default Value

The @media (hover) feature does not have a default value since it depends on the user’s device and its input capabilities.

📝 Example Usage

📜 Example 1: Changing Button Style Based on Hover Support

In this example, the background color of the button will change to blue only if the device supports hover (like on desktops). On touch devices (without hover), the background will stay green.

example.css

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS @media hover Example</title>
  <style>
    button {
      padding: 10px 20px;
      background-color: green;
      color: white;
      border: none;
      cursor: pointer;
    }

    @media (hover: hover) {
      button:hover {
        background-color: blue;
      }
    }

    @media (hover: none) {
      button {
        background-color: green; /* Ensures consistent style on non-hover devices */
      }
    }
  </style>
</head>
<body>
  <h1>Button with Hover Media Query</h1>
  <button>Hover me!</button>
</body>
</html>

🖥️ Browser Compatibility

The @media (hover) property is supported by most modern browsers including Chrome, Firefox, Safari, Edge, and Opera. It's advisable to test for compatibility across different devices (desktops, tablets, phones) to ensure that the feature behaves as expected.

🎉 Conclusion

The CSS @media (hover) property is a valuable tool when designing responsive and interactive user interfaces. It allows you to detect whether a device can hover and apply styles accordingly. This is especially useful when designing for both desktop and touch devices, ensuring an optimal user experience across different platforms.