Jquery: изменение BGcolor при вводе при наведении, затем обратно при наведении мыши, но если у ввода есть фокус, отключите изменение мыши BGcolor

Question

У меня есть вход, когда сомон находится над входом, я хочу, чтобы BGcolor сменил цвет на серый, затем, когда они зависли от входа, я хочу, чтобы BGcolor сменился на белый (цвет по умолчанию).Но я также хочу, чтобы цвет ввода BGcolor изменялся на серый, когда фокус фокусируется на входе, но когда человек фокусируется на входе, а затем перемещает курсор с входа, цвет BGcolor снова изменится на белый, даже если вход имеетфокус.Поэтому в основном я хочу, чтобы функция наведения мыши была отключена, когда поле ввода имеет фокус, а затем, когда оно больше не имеет фокуса, повторно включите функцию наведения мыши.

Кто-нибудь может мне помочь?Я не уверен, как это сделать ...

Answer 1

Вы можете сделать это, используя только CSS (почему бы не сделать это простым?), JavaScript вообще не нужен:

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

Вы можете проверить это здесь .

Если я точно следую тому, что вы говорите, в скрипте это будет выглядеть так (для полного отключения наведения), вы можете сделать это, используя .live() или .delegate() , вот так:

$("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. «Флаг» может принимать различные формы, но хороший способ сделать это в 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(...);
});