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()方法检查密码字段是否在: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忽略了焦点上的mouseleave

2 个答案: