Question

我有一个输入，当somone在输入上盘旋时我希望它的BGcolor变为灰色，然后当它们悬停在输入上时我希望它的BGcolor变回白色（默认颜色）。但是我也希望输入的BGcolor在焦点输入时变为灰色，但是当人们专注于输入，然后将光标从输入移开时，即使输入有BGcolor，BGcolor也会变回白色焦点。所以基本上我希望当输入框有焦点时禁用mouseover mouseout功能，然后当它不再有焦点时，重新启用mouseover mouseout功能。

任何人都可以帮助我吗？我不知道怎么做......

Answer 1

你可以使用 only CSS来实现这一点（为什么不保持简单？），根本不需要JavaScript：

input { background: white; }
input:focus, input:hover { background: gray; }

You can test it out here

如果我完全按照你说的那样，它会在脚本中看起来像这样（要完全禁用悬停），你可以使用.live()或.delegate()执行此操作，如下所示：< / p>

$("input").live("focus blur", function() {
  $(this).toggleClass("focused");
});
$("input:not(.focused)").live("mouseenter", function() {
  $(this).addClass("grayBG");
}).live("mouseleave", function() {
  $(this).removeClass("grayBG");
});

最后2个处理程序在聚焦时（并且具有.focused类）不会对元素起作用。

Answer 2

更一般地说，要检测元素是否具有焦点，您可能希望以某种方式在其onfocus处理程序中标记它并清除其onblur处理程序中的标志。 'flag'可以采用多种形式，但在jQuery中执行此操作的一种好方法是添加/删除一个类，然后可以在其他地方检查它。例如：

$('input.trackingFocus').focus(function(){
    $(this).addClass('hasFocus');
});
$('input.trackingFocus').blur(function(){
    $(this).removeClass('hasFocus');
})

$('input.trackingFocus').hover(
    function(){
        // do stuff on mouse in
    },
    function(){
        if ($(this).hasClass('hasFocus')) {
            // do stuff on mouse out for elements with focus
        } else {
            // do stuff on mouse out for elements without focus
        }
    }
);

Answer 3

在改变样式之前，就像在jQuery集合上使用过滤器一样简单：

$('#myinput').mouseleave(function() {
    $(this).not(':focus').css(...);
});

Jquery：在悬停时输入BGcolor，然后在mouseout时返回，但如果输入有焦点，则禁用mouseout BGcolor更改

3 个答案: