JQuery 忽略焦点上的鼠标离开

Question

抱歉，如果这看起来很基础，我是 JQuery 的新手。

我的页面上有一个密码元素，我想要它，以便当框处于活动状态并且在框中键入时保持绿色，但 mouseleave 似乎优先于焦点。

这是元素的代码：

$(":password").on({
mouseenter: function(){
    $(this).css("background-color", "lightblue");
}, 

blur: function(){
    $(this).css("background-color", "white");
},
focus: function(){

    $(this).css("background-color", "#a6ff4d");

},
mouseleave: function(){
    if ($(":password").not(":focus")) {
    $(this).css("background-color", "white");
    };
},

click: function(){
    $(this).css("background-color", "chartreuse");
    } 
});

我试过：

mouseleave: function(){
if ($(":password").not(":focus")) {
$(this).css("background-color", "white");
};
},

和

mouseleave: function(){
if ($("this").not(":focus")) {
$(this).css("background-color", "white");
};
},

这是最新的jquery。

抱歉，我已经搜索过了，但我在这里找到的答案似乎并没有解决我的问题。

Answer 1

您可以使用 jquery .is() method to check whether the password field is on :focus 。因此，将 onleave 事件中的代码部分替换为 :

if (!$(this).is(":focus")) {
    $(this).css("background-color", "white");
}

这对你有帮助

Answer 2

Working Demo

Html

<input type="text" class="text" />

Jquery

$(".text").on({
mouseenter: function(){

if($(this).is(":focus"))
{
 $(this).css("background-color", "#a6ff4d");
}

    else{

    $(this).css("background-color", "lightblue");
    }


}, 

blur: function(){
   $(this).css("background-color", "white");
},
focus: function(){

    $(this).css("background-color", "#a6ff4d");

},
mouseleave: function(){
 $(this).css("background-color", "white");
    if ($(this).is(":focus")) {


     $(this).css("background-color", "#a6ff4d");
    }
},


});

JQuery 忽略焦点上的鼠标离开

JQuery ignore mouseleave on focus

jquery

focus

mouseleave