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/