html - 如何为输入添加悬停状态？

Question

input[type="email"]:hover {
    border-color: #848484;
}

input[type="email"]:active {
    border-color: #0174DF;
}

input[type="email"]:focus {
    border-color: #0174DF;
}

我想制作一个 input，就像 Google 搜索中的那样，当光标位于输入上方(不是焦点)时，边框的颜色变暗(我用 做了这个: hover)，当我点击 Input 现在变为蓝色，但当我释放点击时颜色又回到 :hover 状态，我该怎么做？

Answer 1

这是解决方案:

input[type="email"] {
    outline: none;
    background-color: white;
    border: solid #A4A4A4;

}

input[type="email"]:hover {
    border-color: #939393;
}   

input[type="email"]:focus {
    border-color: #0080FF;
}

在 google.com 上有相同的输入