文本框 CSS 悬停/聚焦

Question

我给我的文本框添加了一个漂亮的边框，但是想在鼠标悬停时添加一个灰色边框，但我遇到了一个问题。我需要在文本框未被选中时，在鼠标悬停时显示该框。有什么方法可以做到这一点吗？谢谢。=)

input:focus{
    outline: none;
    box-shadow: 0px 0px 5px #61C5FA;
    border-color: #5AB0DB;
}

input:hover {
    border: 1px solid #999;
    border-radius: 5px;
}

- user1681891

---

我有些困惑，你试图做什么？你想在悬停时显示哪个框？当它聚焦时，你希望发生什么？ - jamesplease

你的问题并不清楚。 - Forty-Two

我需要灰色的轮廓（input:hover）只在输入框没有焦点时显示（但仍然悬停在上面）。 - user1681891

所以让我明白一下：根据您上面粘贴的代码，您希望它仅在悬停时具有border-radius而不是焦点？但是如果它被聚焦并且您将鼠标悬停在其上，您希望它再次变成正方形？ - jamesplease

所以，如果焦点在方框上，你希望悬停效果不起作用？ - Rick Calder

问题：http://i.imgur.com/azkm7.png - user1681891

Answer 1

input[type="text"]:focus{
outline: none;
box-shadow: 0px 0px 5px #61C5FA;
border:1px solid #5AB0DB;
}

input[type="text"]:hover{
border: 1px solid #999;
border-radius: 5px;
}

input[type="text"]:focus:hover{
outline: none;
box-shadow: 0px 0px 5px #61C5FA;
border:1px solid #5AB0DB;
border-radius:0;

}    ​

我强烈建议按照上面的设置类型，否则每个输入元素（按钮、选择等）都将具有这些效果。

http://jsfiddle.net/calder12/jCaGp/1/

- Rick Calder