Jquery:悬停/取消悬停与模糊/焦点相结合

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/