Question

我需要使用JavaScript删除CSS悬停功能。

我在表单上有一个按钮，用于向我们的数据库服务器提交数据。使用ASP.NET按钮控件的OnClientClick()我想使用getElementById()将元素的文本更改为“正在提交...”，将按钮的背景颜色更改为浅灰色和更重要禁用以下.button：悬停效果我在我的CSS中。

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

我真正感兴趣的是删除/禁用上述CSS的Javascript

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

Answer 1

工作小提琴：https://jsfiddle.net/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");
    };
}

编辑：很抱歉在我回答之前没有注意到你问题的最后部分:)

Answer 2

首先你的css是错误的。它应该是：

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

你正在添加带有id和class的css。你不应该这样做。只需添加课程并使用document.getElementById('submit').removeAttribute('class')

Answer 3

在这种情况下，它删除了消除所有已定义类的class属性，但随后添加了不应删除的类。

在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>

但这样做的最佳方式非常简单且效果很好。

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>

在jsfiddle
上

Answer 4

解决问题有很多解决方案。

例如：

1-使用HTML disabled attribute。

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

2-添加一个覆盖先前样式的类。

.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";

等

使用Javascript

4 个答案: