Remove CSS hover functionality using Javascript - Stack Overflow

admin管理员组

文章数量:1399916

I need to remove CSS hover functionality using JavaScript.

I have a button on a form which submits data to our db server. Using OnClientClick() of an ASP.NET Button control I would like to change the element's text to 'Submitting..' using getElementById(), change the background color of the button to Light Grey and more importantly disable the following .button:hover effect I have in my CSS.

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

All I am really interested in is the Javascript to remove/disable the above CSS

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

I need to remove CSS hover functionality using JavaScript.

I have a button on a form which submits data to our db server. Using OnClientClick() of an ASP.NET Button control I would like to change the element's text to 'Submitting..' using getElementById(), change the background color of the button to Light Grey and more importantly disable the following .button:hover effect I have in my CSS.

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

All I am really interested in is the Javascript to remove/disable the above CSS

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

• javascript
• css
• asp

Share Improve this question Follow edited Nov 13, 2015 at 17:42 Alex 8,69566 gold badges4040 silver badges5050 bronze badges asked Nov 13, 2015 at 11:59 leighhydesleighhydes 8711 gold badge22 silver badges99 bronze badges 1

• Per my understanding, you want to remove hover style but not class itself. right? – Rajesh Commented Nov 13, 2015 at 12:08

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Working fiddle: https://jsfiddle/bm576q6j/17/

var elms = document.getElementsByClassName("test");
var n = elms.length;
function changeColor(color) {
    for(var i = 0; i < n; i ++) {
        elms[i].style.backgroundColor = color;
    }
}
for(var i = 0; i < n; i ++) {
    elms[i].onmouseover = function() {
        changeColor("gray");
    };
}

Edit: Sorry for not noticing last part of your question before I answered :)

There are a lot of solutions for solving your problem.

For example:

1- Using HTML disabled attribute.

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

2- Add a class which overrides the previous style.

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

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

Js:

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

and etc

In this case it removes the class attribute eliminating all defined classes, but then adds that should not be removed.

On jsfiddle

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

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

.another {
    background-color: lightgray;
}

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

But the best way of doing this is so, simple and works well.

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>

On jsfiddle

First of all your css is wrong. It should be:

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

and you are adding css with id and class. You should not do that. Just add with class and use document.getElementById('submit').removeAttribute('class')

本文标签： Remove CSS hover functionality using JavascriptStack Overflow