“悬停”时禁用悬停效果；Span"；是用JavaScript修改的

我有一个文本字段，还有一个最大字符计数器（在我的HTML中不使用

maxlength

）。它是这样工作的：它从500个字符开始，当你输入时，这个数字会减少。计数器位于文本字段下方。当它变为0时，它将变为负数，JavaScript将其变为红色

这里有一个陷阱：我有一个“发送”按钮（用来发送消息），在我的CSS中，在

悬停

上，它会将背景颜色更改为稍微暗一点。当最大字符数低于0时，我让JavaScript将“发送”按钮的背景色更改为灰色。当你删除字符并最终从负片中取出字符数时，我希望按钮再次显示正常。但是，当我将鼠标悬停在“发送”按钮上，当它变回正常状态后，背景不会变暗（但当我回到底片时，背景会变灰）

以下是我的HTML和JavaScript代码（我假设CSS代码已经是可预测的）：

500
var-chars=500；
函数charsLeft（）{
字符=500-$（“#类型_区域”）.val（）.长度；
document.getElementById（“charsLeftH”）.innerHTML=chars；
如果（字符数<50&&chars>0）{
document.getElementById（“charsLeftH”）.style.color=“#9A9A00”；
}否则如果（字符数<1）{
document.getElementById（“charsLeftH”）.style.color=“#BD2031”；
}否则{
document.getElementById（“charsLeftH”）.style.color=“#000000”；
}
};

---

编辑：如果这看起来不够相似，我会尝试复制Twitter的“撰写推文”框。：）

JavaScript将样式放在元素的

style

属性中，该属性通常覆盖CSS

最好的解决方案是删除

style

属性，而不是指定“正常”颜色：

if (chars < 500 && chars > 0) {
    document.getElementById("charsLeftH").removeAttribute("style");
}

if（字符数<500&&chars>0）{
document.getElementById（“charsLeftH”）.removeAttribute（“style”）；
}

删除属性（“样式”）无效。但我找到了解决办法

        <div id="char_count">
            <span id="charsLeftH" title="Characters Remaining" style="cursor: pointer">500</span>
        </div>
        <input type="button" value="Send" id="submit">
        <script>
            var chars = 500;

            function charsLeft() {
                chars = 500 - $("#type_area").val().length;
                document.getElementById("charsLeftH").innerHTML=chars;
                if (chars < 50 && chars > 0) {
                    document.getElementById("charsLeftH").style.color="#9A9A00";
                    document.getElementById("submitX").id="submit";
                } else if (chars < 1) {
                    document.getElementById("charsLeftH").style.color="#BD2031";
                    if (chars < 0) {document.getElementById("submit").id="submitX";}
                } else {
                    document.getElementById("charsLeftH").style.color="#000000";
                    document.getElementById("submitX").id="submit";
                }
            };

            charsLeft();
        </script>

500
var-chars=500；
函数charsLeft（）{
字符=500-$（“#类型_区域”）.val（）.长度；
document.getElementById（“charsLeftH”）.innerHTML=chars；
如果（字符数<50&&chars>0）{
document.getElementById（“charsLeftH”）.style.color=“#9A9A00”；
document.getElementById（“submitX”）.id=“提交”；
}否则如果（字符数<1）{
document.getElementById（“charsLeftH”）.style.color=“#BD2031”；
if（chars<0）{document.getElementById（“submit”）.id=“submitX”}
}否则{
document.getElementById（“charsLeftH”）.style.color=“#000000”；
document.getElementById（“submitX”）.id=“提交”；
}
};
charsLeft（）；

我更改了按钮的ID，并在CSS中为另一个带有灰色背景的ID（

#submitX

）添加了另一种样式。当它从底片中取出时，它会将新的提交按钮（

#submitX

）更改为

#submit

，然后在返回底片时重复

        <div id="char_count">
            <span id="charsLeftH" title="Characters Remaining" style="cursor: pointer">500</span>
        </div>
        <input type="button" value="Send" id="submit">
        <script>
            var chars = 500;

            function charsLeft() {
                chars = 500 - $("#type_area").val().length;
                document.getElementById("charsLeftH").innerHTML=chars;
                if (chars < 50 && chars > 0) {
                    document.getElementById("charsLeftH").style.color="#9A9A00";
                    document.getElementById("submitX").id="submit";
                } else if (chars < 1) {
                    document.getElementById("charsLeftH").style.color="#BD2031";
                    if (chars < 0) {document.getElementById("submit").id="submitX";}
                } else {
                    document.getElementById("charsLeftH").style.color="#000000";
                    document.getElementById("submitX").id="submit";
                }
            };

            charsLeft();
        </script>