使用 Javascript 删除 CSS 悬停功能答案

【问题标题】：Remove CSS hover functionality using Javascript使用 Javascript 删除 CSS 悬停功能
【发布时间】：2015-11-14 01:42:06
【问题描述】：

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

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

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

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

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

【问题讨论】：

根据我的理解，您想删除悬停样式而不是类本身。对吗？

标签： javascript css asp.net

【解决方案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");
    };
}

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

【讨论】：

【解决方案2】：

有很多解决方案可以解决您的问题。

例如：

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

等等

【讨论】：

【解决方案3】：

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

开启jsfiddle

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

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

.another {
    background-color: lightgray;
}

&lt;button class="button" onclick="disableHover(this);"&gt;hover&lt;/button&gt;

但这样做的最佳方法就是这样、简单且效果很好。

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

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

&lt;button class="button" onclick="disableHover(this);"&gt;hover&lt;/button&gt;

开启jsfiddle

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

谢谢。使用我的 CSS 引用按钮：悬停等。您能否详细说明在上面的示例中应该用什么替换“类”？