Input 当输入文本框处于焦点时，如何禁用mouseleave和mouseenter？

事情是这样的

我有两个输入框。狗和猫。 若我在狗的上方盘旋，狗和猫都会变成绿色。很好。 如果我用鼠标点击狗，狗和猫都会变成黄色。很好。 当狗处于焦点时，狗和猫都应该保持黄色，即使我可以在屏幕上移动鼠标

然而，我的问题是，当Dog处于焦点时（I-beam光标在Dog输入框内闪烁），将鼠标移出Dog将激活mouseleave。不是猫和狗都保持黄色（这是我想要的），而是猫和狗都变成蓝色。然后，当我一鼠标悬停，猫和狗都变成绿色。但我希望猫和狗都保持黄色，如果狗是在重点（即，当工字灯闪烁和关闭内狗）

为什么我希望Dog和Cat在Dog内部的I-beam闪烁时始终保持黄色是这样的：在用户单击目标输入框（Dog）内部后，他将用手在键盘上键入。这样做时，他可能会将鼠标移到一边，鼠标光标可能会移出输入框。我仍然希望Dog和Cat都是黄色的（就像单击Dog时一样），这样用户就可以关注这两个输入框。不幸的是，由于我的代码保持原样（参见下文和我的JSFIDLE），我没有得到我想要的。救命

这是我的密码

HTML 以下是我的JSFIDLE：

我在代码中尝试了bind（）、unbind（）和not（：hover），但它们不起作用。我想只有我一个人。这里需要一点帮助。有人吗

---

Frankie Kam，马来西亚。

Make.hover/.blur类；然后你可以移除类（.hover）无焦点并将其重新添加到模糊上。嗨，亚历克斯！谢谢你的回复。你的意思是：我试过了。我不工作。

<input type="text" value="Rover" id="dog" />

$("#dog").focus(function() {
   $("#dog").css("background-color","yellow");
   $("#cat").css("background-color","yellow");
});

$("#dog").hover(function() {
   $("#dog").css("background-color","green");   
   $("#cat").css("background-color","green");    
});

$("#dog").mouseleave(function() {
    $("#dog").css("background-color","blue");   
    $("#cat").css("background-color","blue");      
});


$("#dog").blur(function() {
    $("#dog").css("background-color","white");
    $("#cat").css("background-color","white");
});