Jquery：悬停/取消悬停与模糊/焦点相结合
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5430716/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery: Hover/unhover combined with blur/focus
提问by donpedroper
I've been looking through the questions, but i can't find exactly what i'm looking for..
我一直在寻找问题，但我找不到我正在寻找的确切内容..
I want to know how to make a function that does the following:
我想知道如何制作一个执行以下操作的函数：
- If you hover an element the element changes to blue for example
- If you unhover it changes back to default
- If you click it (focus), it keeps the blue color from the hover effect even if you unhover it
- If you click away (blur), it goes back to the default color and the mouseover effect works again
- 例如，如果您将鼠标悬停在一个元素上，该元素将变为蓝色
- 如果您取消悬停它会更改回默认值
- 如果您单击它（焦点），即使您将其取消悬停，它也会从悬停效果中保留蓝色
- 如果你点击离开（模糊），它会回到默认颜色，鼠标悬停效果再次起作用
How do I do so ;)?
我该怎么做；）？
回答by Sylvain
Update : don't use jQuery.
更新：不要使用 jQuery。
Plain CSS solution :
纯 CSS 解决方案：
<input type="text" value="Test Element" id="test"/>
<style>
#test:hover, #test:focus { color: blue; }
</style>
jsFiddle demo here : https://jsfiddle.net/ngkybcvz/
jsFiddle 演示在这里：https://jsfiddle.net/ngkybcvz/
Using different CSS classes could be a solution.
使用不同的 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 demo here : http://jsfiddle.net/ZRADe/
jsFiddle 演示在这里：http: //jsfiddle.net/ZRADe/
回答by ApPeL
Depends what elements you want to use, if you are doing it for inputs, I recommend using a focusin, focusout instead.
取决于你想使用什么元素，如果你是为了输入，我建议使用 focusin, focusout 代替。
But it would look something like this.
但它看起来像这样。
$(document).ready(function() {
$("li").hover(
function () {
$(this).addClass('.blue');
},
function () {
$(this).removeClass('.blue');
}
);
$("li").click(function() {
$("li").removeClass('.blue');
$(this).addClass('.blue');
});
});
回答by Guidhouse
1 and 2: Use CSS.
1 和 2：使用 CSS。
like:
喜欢：
In CSS(blurry is base class):
在 CSS 中（blurry 是基类）：
.blurry{background:red;}
.blurry:hover{background:blue;}
.focused{background:blue;}
IN js:
在js中：
$(document).ready(function() {
$('#elementID').focus($(this).addClass('focused').removeClass('blurry');)
});)
$('#elementID').blur($(this).addClass('blurry').removeClass('focused');)
});
The CSS will take care of the mouseover / mouseout events without you having to interact with the DOM. And the js does the rest :)
CSS 将处理 mouseover / mouseout 事件，而无需与 DOM 交互。剩下的就交给 js 了 :)
回答by Ellen
I was trying to do something very similar with a div and this is what worked best for me:
我试图用 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": "" });
}
}
);
回答by trgraglia
I would just set a flag and then have each function do as you wish.
我只是设置一个标志，然后让每个功能按你的意愿做。
so hover doesnt set the flag and acts like normal, changing back and forth. but the second function in hover, the unhover function would not change back to default if the flag is set which would be set by the click and unset by the blur...
所以悬停不会设置标志并且像正常一样来回改变。但是悬停中的第二个功能，如果设置了标志，则 unhover 功能不会更改回默认值，该标志将由点击设置并由模糊取消...
JQUERY HOVER:
JQUERY悬停：
回答by cusimar9
Your first 3 requirements are straightforward. 1 + 2 are easy to do with CSS only and the :hover selector
您的前 3 个要求很简单。1 + 2 很容易只用 CSS 和 :hover 选择器
For 3 you would need to change the class of the element using JQuery like so
对于 3，您需要像这样使用 JQuery 更改元素的类
$('#MyElement').removeClass('RegularClass');
$('#MyElement').addClass('SelectedClass');
As for your 4th requirement, you may want to have a look at JQuery's focusout eventwhich may achieve what you need.
至于你的第四个要求，你可能想看看JQuery 的 focusout 事件，它可以实现你所需要的。
