Javascript 悬停、聚焦和模糊冲突

我想对元素应用4种效果：

将鼠标悬停在元素上

将鼠标悬停在远离图元的位置时

关注元素

在模糊上

但是有一个冲突发生了，当我关注元素时，悬停进入和退出，当我在元素外单击时，应该在模糊上发生的效果没有发生，我想这是因为悬停离开

var el=$（'input'）；
el.focus（函数（）{
el.css（‘边框’、‘1px纯绿色’）；
});
el.hover（函数（）{
el.css（‘边框’、‘1px纯绿色’）；
}，函数（）{
el.css（‘边框’、‘1px纯灰’）；
});
el.blur（函数（）{
如果（el.val==''）{
el.css（‘边框’、‘1px实心红色’）；
}否则{
el.css（‘边框’、‘1px纯灰’）；
}
});
问题是由于
if
条件中的逻辑造成的
el.val
返回函数的引用，该引用永远不会等于空字符串。您需要使用
el.val（）
来获取控件的实际值：


var el=$（'input'）；
el.focus（函数（）{
el.css（‘边框’、‘1px纯绿色’）；
});
el.hover（函数（）{
el.css（‘边框’、‘1px纯绿色’）；
}，函数（）{
el.css（‘边框’、‘1px纯灰’）；
});
el.blur（函数（）{
如果（el.val（）=''）{
el.css（‘边框’、‘1px实心红色’）；
}否则{
el.css（‘边框’、‘1px纯灰’）；
}
});

谢谢，模糊问题已经解决，但悬停和聚焦之间仍然存在冲突。我觉得它变成绿色。我编辑了答案以删除
大纲
，并使边框更厚，以便更容易查看。这很好，但是如果我想在值为空时显示消息，该怎么办<代码>el.after（'此字段不能为空'）
那就行了，只要使用原始的
语句就行了。我还建议你检查一下这个错误是否已经存在，否则你可能会重复很多次。是的，你是对的，我做了两次检查，现在一切都很顺利，非常感谢