Javascript 如何防止css对元素着色

我正在制作一个注册表单，当密码和确认密码匹配时，注册按钮在悬停时变为绿色，但当您将鼠标悬停在按钮上方时，它变为绿色，并从密码字段中删除一个数字（因此密码和确认密码不匹配）当你移开鼠标时，按钮保持绿色，而不是变回原来的颜色

密码匹配时按钮为绿色

密码不匹配时按钮保持绿色

代码笔：

HTML:

JS:

---

解决此问题的一种方法是在keyup上再次运行check（）函数：

<input id="password" onkeyup="check()" type="password" name="password" placeholder="Password.." onfocus="this.placeholder=''" onblur="this.placeholder='Password..'" required>

发生这种情况是因为。当密码不匹配时，禁用提交按钮，这意味着

mouseleave

永远不会被触发，样式也永远不会恢复正常

您可以使用css

enabled

和

hover

属性，而不是jquery的

mouseenter

和

mouseleave

来解决这个问题

在css中，添加以下规则：

#submit:enabled:hover {
  background-color: #009FFD;
  border-radius: 10px;
  color: 423d3d;
}

在javascript中，删除事件侦听器：

var check = function() {

   if (document.getElementById("password").value == document.getElementById("confirm_password").value) {
       document.getElementById("msg").style.color = "#009FFD"; // Green
       document.getElementById("msg").innerHTML = "&#10004"; // Sign
       document.getElementById("submit").disabled = false; // Able to login (passwords match)
   } else {
       document.getElementById("msg").style.color = "red"; 
       document.getElementById("msg").innerHTML = "&#9888"; // Sign
       document.getElementById("submit").disabled = true; // Unable to login (passwords do not match)
   }

}

---

Benjamin关于mouseenter和mouseleave事件的描述是正确的，他使用的

：hover

伪类确实是处理它的方法，但我也喜欢将样式排除在javascript之外；我宁愿设置描述事物状态的类，然后使用CSS，而不是在元素上操纵

.style

您可以使用几乎所有的CSS和最少量的javascript来实现这一点。
下面，我要做的就是在

元素上切换类

valid

和

invalid

，并启用/禁用提交按钮。根据表单是

.valid

还是

.invalid

//获取我们只使用一次的元素。
让password=document.getElementById（'password'）；
让confirm=document.getElementById（'confirm_password'）；
let submit=document.getElementById（'submit'）；
让form=password.parentElement；
让检查=函数（）{
if（password.value==confirm.value）{
form.classList.remove（'invalid'）；
form.classList.add（'valid'）；
submit.disabled=false；
}
否则{
form.classList.remove（'valid'）；
form.classList.add（'invalid'）；
submit.disabled=true；
}
}

#msg{
左：3%；
字号：1.5em；
字体大小：粗体；
位置：相对位置；
}
#提交{
位置：相对位置；
左：3%；
宽度：120px；
颜色：#4e5463；
背景色：#e8ecf7；
光标：指针；
}
form.valid#msg:before{
内容：'\2714'；
颜色：#009FFD；
}
form.invalid#msg:before{
内容：'\0026A0'；
颜色：红色；
}
form.valid#提交：悬停{
背景色：#009FFD；
颜色：#423d3d；
边界半径：10px；
}

暗语


确认密码

这确实解决了一个bug，但不是问题所涉及的bug。不过，如果您注意到按钮在两个输入都为空的情况下仍在更改颜色，则表示感谢。只有当两个密码都被激活时，按钮才必须变为绿色match@Makeyka要解决这个问题，只需在两个密码字段都为空时禁用submit按钮。你可能想这样做，对吗？顺便说一下，你显示的颜色是蓝色而不是绿色。如果你是色盲，不要试图取笑你，但这可能会让一些人感到困惑。哦，对了，它是蓝色的，我用的是夜灯，所以对我来说它是绿色的。谢谢你真的帮了我的忙！请您解释一下CSS部分，我不太理解内容部分Sure@Makeyka-有CSS伪元素和

：after

可以放在元素之前/之后，因此我的CSS本质上是在

#msg

元素之前添加一个元素。在这些CSS生成的元素中，您可以设置元素中的内容。

<input id="password" onkeyup="check()" type="password" name="password" placeholder="Password.." onfocus="this.placeholder=''" onblur="this.placeholder='Password..'" required>

#submit:enabled:hover {
  background-color: #009FFD;
  border-radius: 10px;
  color: 423d3d;
}

var check = function() {

   if (document.getElementById("password").value == document.getElementById("confirm_password").value) {
       document.getElementById("msg").style.color = "#009FFD"; // Green
       document.getElementById("msg").innerHTML = "&#10004"; // Sign
       document.getElementById("submit").disabled = false; // Able to login (passwords match)
   } else {
       document.getElementById("msg").style.color = "red"; 
       document.getElementById("msg").innerHTML = "&#9888"; // Sign
       document.getElementById("submit").disabled = true; // Unable to login (passwords do not match)
   }

}