Question

我目前对我正在处理的网站上的按钮的行为感到困惑（这是作为模板购买并且正在修改以适应）。

按钮是一个提交表单按钮，黑色，白色文字，悬停时为灰色，黑色文字。当用户点击该按钮时，我将其更改为绿色背景和黑色文本以确认提交成功。

在短暂的一段时间之后，这将运行一个重置功能，我想将按钮设置回原始状态，黑色背景，白色文本，并在悬停时变为灰色和黑色文本。

由于某种原因，重置功能不允许标准CSS运行，并且坚持使用最后指定的状态（即绿色背景，除非我手动指定在重置功能本身中更改颜色）。奇怪的是，文本在悬停时仍能正确改变颜色......

首先，我是以错误的方式解决这个问题吗？其次，有人知道这个问题的解决方案吗？

（很多代码，我试图在这里挑选相关元素，但可能需要稍后添加更多）

HTML：

<a href="#" id="message_btn" data-type="submit" class="more_btn">send message</a>

CSS

.more_btn {
    display: inline-block;
    margin-top: 33px;
    color: #fff;
    text-decoration:none; 
    font: bold 18px/20px "Open Sans", Arial, sans-serif;
    background: #121212;
    width: 370px;
    max-width: 100%;
    padding: 21px 0;
    border-radius: 3px;
    text-align: center;
    text-transform: uppercase;
    }

.more_btn:hover {
    color: #000;
    background: #777;
    }

JavaScript的：

提交后：

document.getElementById("message_btn").innerHTML = "sending message...";

成功时：

document.getElementById("message_btn").innerHTML = "<i class=\"fa fa-check\"></i> message sent";
document.getElementById("message_btn").style.backgroundColor = "#477519";

重置时：

document.getElementById("message_btn").innerHTML = "send message";
document.getElementById("message_btn").className = "more_btn";

这是重置的最后一行，我认为可以通过允许CSS获得控制来解决这个问题，但似乎并非如此。

欢迎任何想法。

感谢。

与JavaScript结合使用时，按钮悬停状态部分丢失

0 个答案: