Disable hover effects in CSS with JavaScript

Question

Disable hover effects in CSS with JavaScript

I am looking for a way to deactivate CSS hover functionality using JavaScript.

Within a form, there is a button that sends data to the database server. By utilizing OnClientClick() of an ASP.NET Button control, my goal is to modify the text of the element to 'Submitting..', change the background color of the button to Light Grey and most importantly, eliminate the hover effect defined in my CSS for .button:hover, .content-form input.button:hover, and #comment-form #submit:hover.

.button:hover, 
.content-form input.button:hover, 
#comment-form #submit:hover   
{
    background-color: #333;
}

The main focus is on implementing Javascript to disable the aforementioned CSS effects.

e.g. OnClientClick="getElementByID('ButtonName').blahblahblah;"

javascript css asp.net

Answer 1

Answer №1

Here is a functional demo: https://jsfiddle.net/abc123xyz/25/

const elements = document.querySelectorAll(".sample");
const count = elements.length;
function modifyStyle(style) {
    for(let i = 0; i < count; i++) {
        elements[i].style.color = style;
    }
}
for(let i = 0; i < count; i++) {
    elements[i].onmouseover = function() {
        modifyStyle("blue");
    };
}

Note: Apologies for missing the final part of your query in my initial response :)

Answer 2

Here is a functional demo: https://jsfiddle.net/abc123xyz/25/

const elements = document.querySelectorAll(".sample");
const count = elements.length;
function modifyStyle(style) {
    for(let i = 0; i < count; i++) {
        elements[i].style.color = style;
    }
}
for(let i = 0; i < count; i++) {
    elements[i].onmouseover = function() {
        modifyStyle("blue");
    };
}

Note: Apologies for missing the final part of your query in my initial response :)

Answer 3

Answer №2

There are numerous ways to tackle the issue at hand.

For instance:

1- Utilizing the HTML disabled attribute.

OnClientClick="getElementByID('ButtonName').disabled=true;

2- Introducing a class that overrides the existing style.

.button:hover, 
.content-form input.button:hover, 
 #comment-form #submit:hover    
 {
    background-color: #333;
 }

 .button.submitted:hover
 {
    background-color: gray;
 }

Js:

OnClientClick="getElementByID('ButtonName').className = "submitted";

and so on

Answer 4

There are numerous ways to tackle the issue at hand.

For instance:

1- Utilizing the HTML disabled attribute.

OnClientClick="getElementByID('ButtonName').disabled=true;

2- Introducing a class that overrides the existing style.

.button:hover, 
.content-form input.button:hover, 
 #comment-form #submit:hover    
 {
    background-color: #333;
 }

 .button.submitted:hover
 {
    background-color: gray;
 }

Js:

OnClientClick="getElementByID('ButtonName').className = "submitted";

and so on

Answer 5

Answer №3

In this scenario, it first removes the class attribute which eliminates all previously defined classes and then adds a new class that should not be removed.

Check out the code on jsfiddle

function eliminateClass(elem) {
elem.removeAttribute('class');
elem.setAttribute('class', 'another');
}

.button:hover {
    background-color: #333;
}

.another {
    background-color: lightgray;
}

<button class="button" onclick="eliminateClass(this);">hover</button>

However, the most effective way to achieve this is much simpler and efficient.

function disableHover(elem) {
    elem.classList.remove('button');
    elem.classList.add('another');
}

.button:hover {
    background-color: #333;
}
.another {
    background-color: lightgray;
}

<button class="button" onclick="disableHover(this);">hover</button>

See the improved code at jsfiddle

Answer 6

In this scenario, it first removes the class attribute which eliminates all previously defined classes and then adds a new class that should not be removed.

Check out the code on jsfiddle

function eliminateClass(elem) {
elem.removeAttribute('class');
elem.setAttribute('class', 'another');
}

.button:hover {
    background-color: #333;
}

.another {
    background-color: lightgray;
}

<button class="button" onclick="eliminateClass(this);">hover</button>

However, the most effective way to achieve this is much simpler and efficient.

function disableHover(elem) {
    elem.classList.remove('button');
    elem.classList.add('another');
}

.button:hover {
    background-color: #333;
}
.another {
    background-color: lightgray;
}

<button class="button" onclick="disableHover(this);">hover</button>

See the improved code at jsfiddle

Answer 7

Answer №4

First and foremost, the css you have written is incorrect. It should be:

.button:hover, .content-form input.button:hover, #comment-form, #submit:hover    {
    background-color: #333;
}

Additionally, you are applying css with both id and class. This is not recommended. Stick to using classes only and consider using

document.getElementById('submit').removeAttribute('class')

instead.

Answer 8

First and foremost, the css you have written is incorrect. It should be:

.button:hover, .content-form input.button:hover, #comment-form, #submit:hover    {
    background-color: #333;
}

Additionally, you are applying css with both id and class. This is not recommended. Stick to using classes only and consider using

document.getElementById('submit').removeAttribute('class')

instead.

Disable hover effects in CSS with JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Dealing with promises in AngularJS within the ui-router configuration

Managing numerous ajax forms within a single page

What are the steps for implementing a Custom SiteMapProvider in ASP NET MVC?

Learn how to pass an id from the query parameters to the getInitialProps function in Next.js

Having trouble with my ASP.net SQL UPDATE query, it's not functioning as expected

The value control input does not get properly updated by ngModelChange

Is there a distinction between em and percentage measurements and do their defaults have specified definitions?

Dynamically inserting a new row into a table with the power of jQuery

Are there equivalent npm variables like (`npm_config_`) available in yarn console scripts?

Hidden text within a webpage that remains concealed until a specific link is activated

Why does the CSHTML button containing a JavaScript onclick function only function intermittently?

Deactivate toggle effect by clicking on a different link

The z-index of the React Apex Chart toolbar menu icon is too high. Is there a way to decrease it?

Evaluating Vue.js Watchers using Jasmine

React-app size has grown larger post-deployment

Canvas ctx.drawImage() function not functioning properly

JavaScript is reliant on the presence of the alert() function to properly function

Eliminate the static JSON by using an HTTP GET request instead

Exploring the process of integrating absolute paths within a global SCSS file in a VueJS project

Loading JavaScript in the background using Java and HtmlUnit