文本框 CSS 悬停/焦点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13056207/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TextBox CSS Hover/Focus
提问by user1681891
I added a nice box outline to my text box on focus, but want to add a grey outline on hover, but I ran into an issue. I need to display the box on hover when the textbox is not selected. Any way to do this? Thanks. =)
我在焦点文本框中添加了一个漂亮的框轮廓，但想在悬停时添加一个灰色轮廓，但我遇到了一个问题。当未选择文本框时，我需要在悬停时显示该框。有没有办法做到这一点？谢谢。=)
input:focus{
outline: none;
box-shadow: 0px 0px 5px #61C5FA;
border-color: #5AB0DB;
}
input:hover {
border: 1px solid #999;
border-radius: 5px;
}
回答by Rick Calder
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/
http://jsfiddle.net/calder12/jCaGp/1/
I STRONGLY suggest setting the type as above otherwise every input element (buttons, selects, etc) will take on these effects.
我强烈建议按上述方式设置类型，否则每个输入元素（按钮、选择等）都会产生这些效果。
