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

前端之家收集整理的这篇文章主要介绍了Jquery:悬停/取消悬停与模糊/焦点相结合前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直在查看问题,但我找不到我正在寻找的东西..

我想知道如何创建一个执行以下操作的函数

>如果将元素悬停在元素上
例如,变为蓝色
>如果你取消它,它会改变回来
默认
>如果你点击它(焦点),它会保持
悬停效果的蓝色
即使你取消它
>如果你点击了(模糊),它就会消失
回到默认颜色和
鼠标悬停效果再次起作用

我该怎么做;)?

解决方法

@H_403_20@ 更新:不要使用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/

猜你在找的jQuery相关文章