javascript - 如何使用 jquery 删除提交按钮的悬停属性？

Question

准备好文档后，我禁用了表单提交按钮

jQuery(document).ready(function ($) {
//disable submit button

$('input[type="submit"]').prop("disabled", true);

现在根据正在更改的文本字段，我启用/禁用提交按钮

$("#codetextfield").change(function () {

        if (~$.inArray($(this).val().toLowerCase(), vouchersArr)) {

             $('input[type="submit"]').prop("disabled", false);
        } else {
            $(this).val('Non valid');   
             $('input[type="submit"]').prop("disabled", true);
        }
    });//end change

但是按钮悬停效果仍然有效，用户只是认为表单没有反应。那么如何去除按钮悬停效果呢？

Answer 1

我想你的意思是unbind而不是删除:

$("input[type='submit']").unbind("mouseenter mouseleave");

这将完全解决悬停问题。

P.S.:如果你想把它设置回去，你可以很容易地做到:

$("input[type='submit']").on(
    "mouseenter": function(){
        // Do something
    },
    "mouseleave": function(){
        // Do something
    }
});

编辑 如果这对您仍然失败，您始终可以在元素上强制执行 CSS，但我建议您将一个类或一个 id 绑定(bind)到您的元素以使其成为解决方案的焦点。例如，假设您添加了一个不可悬停 类。

jsFiddle

HTML

<form>
    <input type="submit" class="hoverable" value="Hoverable"></input>
    <br/><br/><br/>
    <input type="submit" class="not-hoverable" value="Not Hoverable"></input>
</form>

CSS

.hoverable {
    cursor: pointer;
}
.not-hoverable {
    cursor: arrow;
}

此变通方法可以应用于文档准备好的元素，如下所示:

$(".selector-for-the-submit-button-here").addClass("hoverable");
$(".selector-for-the-other-submit-button-here").addClass("not-hoverable");

在处理 CSS 和 WordPress 之类的东西时，如果 WordPress 与您作对，您需要确保您的样式凌驾于 WordPress 之上。作为最后的手段，在您的 CSS 语句末尾添加 !important 以确保您的规则将像这样工作:

.hoverable {
    cursor: pointer !important;
}
.not-hoverable {
    cursor: pointer !important;
}