html - hover 和 focus 伪类 Action

Question

我正在试验 css 并尝试在我的选择器中添加一个动态伪类。这是 HTML 标记片段。

<div id="child">
    <input type="text" id="text"/>
</div>

和它对应的css-style

input[type="text"]{
    width: 150px;
    height: 25px;
}
input[type="text"]:hover, input[type="text"]:focus{
    border: 1px solid grey;
}
#child{
    padding: 5px;
    border: 20px solid;
    background: aqua;
    height: 50px;
    margin: 10px;
}

这是 JSFIDDLE例子。因此，当鼠标悬停在 text 元素上时，文本元素的大小会缩小如下:

有人知道为什么会出现这种尺寸减小吗？

Answer 1

现在在您的代码中发生的事情是您已将 input 字段的宽度和高度分别设置为 150px 和 25px。现在，当您向其添加 1px 边框 时将减少输入字段的内部(白色)部分以保持所提到的宽度和高度(150px 和 25px)。要解决这个问题，您可以在 hover.Fiddle 上将宽度和高度都增加 2px: http://jsfiddle.net/z78BN/6

input[type="text"]:hover, input[type="text"]:focus{
   width: 152px;
   height: 27px;
   border: 1px solid grey;
}