上一篇: jquery – 通过在MVC中调用Contr... 下一篇:jquery – 访问多文件上载表单的...

焦点相结合

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Jquery：悬停/取消悬停与模糊/焦点相结合，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我一直在查看问题,但我找不到我正在寻找的东西..

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

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

我该怎么做;)？

解决方法

更新：不要使用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");
});