How to Remove the CSS :hover Behavior from an Element
To remove the CSS hover effect from a specific element, you can set the pointer-events property of the element (the hover behavior of which you want to disable) to “none”.
In the example below, we have some buttons created with <div> elements. We set the display of the «button» class to «inline-block» and continue styling this class by specifying the border-radius, border, background, cursor, padding and margin properties. We add the :hover pseudo-class to the «button-blue» and «button-green» classes, but disable this behavior for the «disabled» class with the pointer-events property.
Example of removing the hover behavior with the CSS pointer-events property:
Result
In the next example, we have two classes and only one of them style with a :hover pseudo-class.
Example of applying the hover behavior to only one class:
In our last example, we use the :not() pseudo-class to remove the hover behavior from a specified class.
Можно как то запретить срабатывание :hover css до повторного наведения?
Я думаю сталкивались многие, в чем суть:
Имеем допустим кнопку, которая по клику получает дополнительный класс active но у кнопки есть эффект :hover который тут же срабатывает так как после клика курсор по прежнему находится на кнопке.
Вместо того чтобы видеть зеленую кнопку после клика, мы видим синюю так как hover внес свои поправки.
Как запретить срабатывание :hover сразу, а разрешить только при повторном наведении курсора?
CSS disable hover effect
I need to disable the mouse hover on a particular button(not on all buttons) in the entire DOM. Please let me know how to achieve it using a CSS class.
i am using the below CSS class when my button is disabled. now i want to remove the hover effect using the same class.
The above class will take care of removing the hand sign and text underline on mouse over . Now i want to remove hover effect also. Please let me know.
15 Answers 15
I have really simple solution for this.
just create a new class
and use this to disable any event on it. use it like:
You can achieve this using :not selector:
CSS code (using scss):
In this way you apply the hover effect style when a specified class (.disable) is not applied.
Here is way to to unset the hover effect.
For this I ended up using an inline style because I only wanted the one particular element not to have any hover on-click event or style due to it just being part of instructions regarding the other buttons that looked like it on the page, and to give it override precedence. Which was this:
This removed all styling and bound JavaScript/JQuery functionality on the single element for me, while not affecting the others on the page :). For more info see the mozilla reference.
To disable the hover effect, I’ve got two suggestions:
- if your hover effect is triggered by JavaScript, just use $.unbind(‘hover’);
- if your hover style is triggered by class, then just use $.removeClass(‘hoverCssClass’);
Using CSS !important to override CSS will make your CSS very unclean thus that method is not recommended. You can always duplicate a CSS style with different class name to keep the same styling.
From your question all I can understand is that you already have some hover effect on your button which you want remove. For that either remove that css which causes the hover effect or override it.
For overriding, do this
For example if your button’s background color changes on hover from red to blue. In the overriding css you will make it as red so that it doesnt change.
Also go through all the rules of writing and overriding css. Get familiar with what css will have what priority.
Add the following to add hover effect on disabled button:
Do this Html and the CSS is in the head tag. Just make a new class and in the css use this code snippet:
Use transition: all 100s ease-in-out; to override the hover change. This is not a solution but a workaround if you do not know the original value of the property which you want to replace.
Other solutions didn’t work for me.
I simply changed this
That means the same styles that are applied to elements of that class are also applied to elements of that class when hovered.
Extra note: If you’re keeping the colour the same, perhaps you may also want to avoid any underline, if so, just include text-decoration: none; as well (or text-decoration: none !important; if using bootstrap).
I tried the following and it works for me better
Code:
What I did here is that I make the hover effect on the button but doesn’t apply to the button that has the disabled class
Problem which I understood — Well I was doing something the same as yours. I have used four links among which two of them will hover and the other two will not. Now that I have used the a tag(hyperlink tag in HTML) to use hover, all my hyperlinks start hovering, which I don’t want.
So, I put the two a tags which were not supposed to hover inside the same class, say .drop, and use the class to specify that I want all a tags inside the dropped class not to hover but the other a tags do.
To do so, I just wrote a CSS
what I meant here is that apply a hover to all the tags but not the ones which are inside the .drop class.
CSS Disable hover Effect
This post will explain the method for applying the CSS disable hover effect.
How to Apply CSS Disable hover Effect?
To apply CSS to disable the hover effect, use the CSS “pointer-events” property and set the value of this property as “none”. To do so, follow the given instructions.
Step 1: Make a div Container
First, make a div container with the help of the “<div>” element and insert an id or class attribute with a specific name.
Step 2: Insert Heading
Next, utilize the heading tag and embed text inside the heading tag. For that purpose, the <h1> tag is used.
Step 3: Add “<a>” Tag
After that, add the “<a>” tag, and with the help of “href”, add a URL of the page the link navigates. Also, add a “class” attribute with a particular name and embed text in between the “<a>” tag to display:
< h1 > Linuxhint Official Website < / h1 >
Output
Step 4: Style “div” Container
Access the div container by using the id value as “#main”:
border : 3px solid green ;
background-color : rgb ( 173 , 224 , 173 ) ;
Then, apply the mentioned properties listed below:
- “margin” and “padding” both are utilized for specifying the space in the HTML page. Whereas the “margin” is used for adding space outside the boundary, and “padding” is for inside spacing.
- “border” defines a boundary around a particular element.
- “background-color” determines the color at the backside of the element.
Output
Step 5: Disable “hover” Effect
Access the “<a>” element with the class name as “.noHover”:
background-color : rgb ( 240 , 116 , 116 ) ;
Next, apply the “pointer-events” property that regulates how HTML components react to mouse/touch, JavaScript click/tap, and active/hover CSS states as well as whether or not the cursor is displayed.
Output
That’s all about CSS disable hover effect.
Conclusion
To apply CSS to disable the hover effect, use the CSS “pointer-events” property and set the value of this property as “none”. The pointer-event property is utilized for regulating how HTML components react to mouse/touch, JavaScript click/tap, and active/hover CSS states, as well as whether or not the cursor is displayed. This post has demonstrated the method for applying CSS to disable hover effect.