使用Javascript删除CSS悬停功能

Remove CSS hover functionality using Javascript

本文关键字：悬停 功能 CSS 删除 Javascript 使用      更新时间：2023-09-26

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

我在一个表单上有一个按钮，它将数据提交给我们的数据库服务器。使用ASP.NET按钮控件的OnClientClick()，我想将元素的文本更改为"Submiting.."使用getElementById()，将按钮的背景色更改为浅灰色，更重要的是禁用以下功能。button:悬停效果我在CSS中有。

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

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

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

工作小提琴：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");
    };
}

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

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

例如：

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

等等

在这种情况下，它删除了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

首先，您的css是错误的。应该是：

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

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

相关文章：