Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Remove CSS Hover Behavior from an Element
Removing the :hover effect means stopping an element from changing its appearance when a user hovers over it. You might need to do this if the hover effect is unnecessary, distracting, or doesn't fit with the design of your page.
Our goal is to show you a simple way to disable the hover effect without messing with the other styles of the element, so your design stays consistent and user-friendly.
Approaches to Remove the :hover Effect
We'll show you different ways to remove the :hover effect from any element. Whether you're using CSS, JavaScript, or targeting specific devices, these methods will help you get the result you need.
- Disable Hover with pointer-events: none
- Disable Hover by Overriding with !important
- Disable Hover Effect for Links
- Disable Hover with a Disabled Class
- Using the :not() Pseudo-Class
Disable Hover with pointer-events: none
In this approach, we disable hover interactions by using pointer-events: none. This tells the browser to ignore mouse actions (like hovering) on the element.
Steps We've Taken:
- First, we choose an element to apply this to. In this case, we've chosen a button.
- Next, we apply the CSS rule by setting pointer-events to none, making the element unresponsive to mouse events, including hover.
Example
Here's an example of applying pointer-events: none. The button doesn't change color when hovered because pointer events are disabled.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.button {
background-color: blue;
padding: 10px 20px;
color: white;
cursor: pointer
}
/* The hover effect */
.button:hover {
background-color: red;
}
/* Disable hover effect */
.no-hover {
pointer-events: none;
}
</style>
</head>
<body>
<h2>Using pointer-events: none</h2>
<button class="button">
Hover Me (With Hover Effect)
</button>
<button class="button no-hover">
Click Me (No Hover Effect)
</button>
</body>
</html>
Output
Disable Hover by Overriding with !important
In this approach, we use the !important rule in CSS to override the hover effect. This means we make sure the hover styles don't get applied, no matter what.
Steps We've Taken:
- First, we created a class called .override-hover that resets the hover styles by setting background-color: #007bff !important.
- This stops the hover effect from being triggered when you hover over the button.
Example
Here's the code for two buttons: the first button has a normal hover effect that changes its color when hovered over, while the second button disables the hover effect by overriding it with !important.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.button1 {
padding: 10px 20px;
background-color: #007bff; /* Normal blue color */
color: white;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.button2 {
background-color: #3B7DAB;
}
.button1:hover {
background-color: #0056b3;
}
/* Prevent hover effect on second button */
.override-hover:hover {
background-color: #3B7DAB !important;
}
.button1:active {
background-color: #003366;
}
</style>
</head>
<body>
<h2>Explicitly override hover</h2>
<button class="button1">
Normal Button
</button>
<!-- Second button with no hover effect -->
<button class="button1 button2 override-hover">
Override Hover
</button>
</body>
</html>
Output
Disable Hover Effect for Links
In this approach, we remove the hover effect from links while keeping it for other elements like buttons. This is helpful when you don't want links to change on hover but still want hover effects on other components.
Steps we've taken:
- First, we created a class called .no-hover-link to remove the hover effect from links.
- Next, we applied the class to replace the hover effect with a normal style, so the link looks unchanged even when hovered.
Example
Here's the code that shows how to remove the hover effect from links. The first link has a hover effect, while the second stays unchanged using the .no-hover-link class.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.link {
color: #007bff;
text-decoration: underline;
}
.link:hover {
color: #0056b3;
}
.no-hover-link {
pointer-events: auto;
cursor: pointer;
}
.no-hover-link:hover {
color: #007bff;
text-decoration: underline;
}
</style>
</head>
<body>
<body>
<h2>Link Specific</h2>
<a href="#https://www.tutorialspoint.com/" class="link">
Normal Link
</a><br>
<a href="#https://www.tutorialspoint.com/"
class="link no-hover-link">
No Hover Link
</a>
</body>
</html>
Output
Disable Hover with a Disabled Class
In this approach, we disable the hover effect on elements by adding a "disabled" class. This class makes the element look inactive (e.g., by lowering its opacity) and stops it from responding to hover actions.
Steps we have taken include:
- First, we added the .disabled class to the button.
- Next, this class disables the hover effect and makes the button look inactive (e.g., by lowering its opacity).
Example
Here's a code showing how to disable the hover effect on a button. The first button has a normal hover effect, while the second button with the .disabled class remains unchanged and appears inactive.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.button {
padding: 10px 20px;
background-color: #28b745;
color: white;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s;
}
/* Hover effect for the normal button */
.button:hover {
background-color: #218838;
}
.button.disabled {
background-color: #6c757d;
opacity: 0.7;
cursor: not-allowed;
}
/* Disabled button: no hover effect */
.button.disabled:hover {
background-color: #6c757d;
}
</style>
</head>
<body>
<h2>Using Disabled Class with Different Colors</h2>
<button class="button">Normal Button</button>
<button class="button disabled">
Disabled Button
</button>
</body>
</html>
Output
Using the :not() Pseudo-Class
In this approach, we use the :not() pseudo-class to remove the hover effect from specific elements while keeping it for others. This allows you to apply hover styles globally but exclude certain elements from being affected.
Steps we have taken:
- First, we used the :not() pseudo-class to exclude elements with the .no-hover class from the hover effect.
- As a result, the first button still has the hover effect, but the second button (with the .no-hover class) doesn't change on hover.
Example
Here's the code showing how to remove the hover effect using :not(). The first button has a hover effect, while the second button doesn't.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Base button styles */
.button {
padding: 10px 20px;
border: 2px solid #3498db;
background-color: white;
color: #3498db;
cursor: pointer;
transition: all 0.3s ease;
}
/* Hover effect for buttons with .no-hover class */
.button:not(.no-hover):hover {
background-color: #3498db;
color: white;
}
</style>
</head>
<body>
<h2>Hover Removal Using :not() Pseudo-class</h2>
<button class="button">Hover Enabled</button>
<button class="button no-hover">
Hover Disabled
</button>
</body>
</html>
Output
2K+ Views
