Jquery: Hover / Unhover в сочетании с размытием / фокусом

Question

Я просматривал вопросы, но не могу найти именно то, что ищу ..

Я хочу знать, как создать функцию, которая выполняет следующие действия:

1. Если вы наведите элемент на элемент меняется на синий, например
2. Если вы покажете, он снова изменится на по умолчанию
3. Если вы щелкнете по нему (фокус), он сохранит синий цвет от эффекта наведения даже если вы его покажете
4. Если вы щелкнете (размытие), оно уйдет вернуться к цвету по умолчанию и тому Эффект наведения мыши снова работает

Как мне это сделать;)?

Answer 1

Обновление: не используйте jQuery.

Простое решение CSS:

<input type="text" value="Test Element" id="test"/>

<style>
    #test:hover, #test:focus { color: blue; }
</style>

jsFiddle демо здесь: https://jsfiddle.net/ngkybcvz/

---

Решением может быть использование различных классов CSS.

.elementHovered { color : blue; }
.elementFocused { color : blue; }


<input type="text" value="Test Element" id="test"/>

$("#test").hover(function() {
    $(this).addClass("elementHovered");
}, function() {
    $(this).removeClass("elementHovered");
});


$("#test").focus(function() {
    $(this).addClass("elementFocused");
});

$("#test").blur(function() {
    $(this).removeClass("elementFocused");
});

jsFiddle демо здесь: http://jsfiddle.net/ZRADe/

Answer 2

Зависит от того, какие элементы вы хотите использовать, если вы делаете это для входных данных, я рекомендую вместо этого использовать focusin, focusout.

Но это будет выглядеть примерно так:

$(document).ready(function() {
    $("li").hover(
    function () {
        $(this).addClass('.blue');
    }, 
    function () {
        $(this).removeClass('.blue');
    }
    );

    $("li").click(function() {
        $("li").removeClass('.blue');
        $(this).addClass('.blue');
    });

});

Answer 3

Я пытался сделать что-то очень похожее с div, и это то, что лучше всего сработало для меня:

var focusColor = "#008BFF";
var hoverColor = "#6FBEFF";

var clicked = false;

elem.focusin(
   function () {
       clicked = true;
       elem.css({ "border-color": focusColor });
   }
);

elem.focusout(
   function () {
       clicked = false;
       elem.css({ "border-color": "" });
   }
);

elem.hover(
   function () {
       if (clicked) {
           elem.css({ "border-color": focusColor });
       }
       else {
           elem.css({ "border-color": hoverColor });
       }
   },
   function () {
       if (clicked) {
           elem.css({ "border-color": focusColor });
       }
       else {
           elem.css({ "border-color": "" });
       }
   }
);

Answer 4

1 и 2: использовать CSS.

как:

В CSS (размытый базовый класс):

.blurry{background:red;}
.blurry:hover{background:blue;}
.focused{background:blue;}

IN js:

$(document).ready(function() {
    $('#elementID').focus($(this).addClass('focused').removeClass('blurry');)
    });)
    $('#elementID').blur($(this).addClass('blurry').removeClass('focused');)
});

CSS позаботитсясобытия mouseover / mouseout без необходимости взаимодействия с DOM.И JS делает все остальное:)

Answer 5

Ваши первые 3 требования просты. 1 + 2 легко сделать только с помощью CSS и селектор: hover

Для 3 вам нужно изменить класс элемента, используя JQuery, например:

$('#MyElement').removeClass('RegularClass');
$('#MyElement').addClass('SelectedClass');

Что касается вашего четвертого требования, вы можете взглянуть на событие фокусировки JQuery , которое может достичь того, что вам нужно.

Answer 6

Я бы просто установил флаг, а затем заставил бы каждую функцию работать так, как вы хотите.

, так что hover не устанавливает флаг и действует как обычно, изменяя положение вперед и назад.но вторая функция в hover, функция unhover не вернется к значению по умолчанию, если установлен флаг, который будет установлен щелчком и не установлен размытием ...

JQUERY HOVER:

http://api.jquery.com/hover/