CSS 禁用悬停效果 - 开卷题库

小开

Add the following to add hover effect on disabled button:

.buttonDisabled:hover
{
/*your code goes here*/
}

小开

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

.buttonDisabled:hover
{
//overriding css goes here
}

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.

Best of luck.

小开

I have really simple solution for this.

just create a new class

.noHover{
pointer-events: none;
}

and use this to disable any event on it. use it like:

<a href='' class='btn noHover'>You cant touch ME :P</a>

小开

You can achieve this using :not selector:

HTML code:

<a class="button">Click me</a>
<a class="button disable">Click me</a>

CSS code (using scss):

.button {
background-color: red;
&:not(.disable):hover {
/* apply hover effect here */
}
}

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.

.table-hover > tbody > tr.hidden-table:hover > td {
background-color: unset !important;
color: unset !important;
}

小开

I tried the following and it works for me better

Code:

.unstyled-link{
color: inherit;
text-decoration: inherit;
&:link,
&:hover {
color: inherit;
text-decoration: inherit;
}
}

小开

Do this Html and the CSS is in the head tag. Just make a new class and in the css use this code snippet:

pointer-events:none;


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.buttonDisabled {
pointer-events: none;
}
</style>
</head>
<body>
<button class="buttonDisabled">Not-a-button</button>
</body>
</html>

小开

Other solutions didn't work for me.

I simply changed this

.home_page_category_links {
color:#eb4746;
}

to this:

.home_page_category_links, .home_page_category_links:hover {
color:#eb4746;
}

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).

小开

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:

<button style="pointer-events:none"></button>

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.

小开

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.

小开

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

button:hover:not(button.disabled){
background-color: rgb(214, 214, 214);
color: rgb(0, 0, 44);
}