Html 如何制作`<；div>；`当`<；输入>；`悬停 代码

.topnav{
背景色：黑色；
溢出：隐藏；
}
.topnav a{
框大小：边框框；
颜色：白色；
显示：内联块；
填充：14px 16px；
文字装饰：无；
字号：17px；
边缘顶部：6px；
边缘底部：6px；
右边距：6px；
}
.topnav a:悬停{
背景颜色：蓝色；
颜色：白色；
}
.topnav a.active{
背景颜色：蓝色；
颜色：白色；
}
.topnav输入[类型=文本]{
显示：内联块；
浮动：对；
宽度：20%；
填充：14px；
边界半径：1px；
背景色：白色；
利润率：6px；
框大小：边框框；
大纲：无；
过渡：0.1s；
}
.topnav输入[类型=文本]：悬停{
边框：3件纯蓝；
}

---

在默认状态下简单添加透明边框

border: 3px solid blue;

.topnav{
背景色：黑色；
溢出：隐藏；
}
.topnav a{
框大小：边框框；
颜色：白色；
显示：内联块；
填充：14px 16px；
文字装饰：无；
字号：17px；
边缘顶部：6px；
边缘底部：6px；
右边距：6px；
}
.topnav a:悬停{
背景颜色：蓝色；
颜色：白色；
}
.topnav a.active{
背景颜色：蓝色；
颜色：白色；
}
.topnav输入[类型=文本]{
显示：内联块；
浮动：对；
宽度：20%；
填充：14px；
边界半径：1px；
背景色：白色；
利润率：6px；
框大小：边框框；
大纲：无；
过渡：0.1s；
边框：3倍纯色透明；
}
.topnav输入[类型=文本]：悬停{
边框：3件纯蓝；
}

---

只需在

元素初始样式中添加一个透明边框，如

边框：3px实心透明

，这样

边框

的空间就已经在父容器中分配给它了，因此当

悬停时，不会使

.topnav

增长

用户代理样式表为输入元素提供默认的2px

边框宽度

，因此当您尝试使用

width:auto

并使悬停状态为

边框：3px纯蓝色

时，我们看到边界从2px变为3px，父容器

.topnav

也随之增长，这是因为

元素边界不断增加并占据了更多的空间

.topnav{
背景色：黑色；
溢出：隐藏；
}
.topnav a{
框大小：边框框；
颜色：白色；
显示：内联块；
填充：14px 16px；
文字装饰：无；
字号：17px；
边缘顶部：6px；
边缘底部：6px；
右边距：6px；
}
.topnav a:悬停{
背景颜色：蓝色；
颜色：白色；
}
.topnav a.active{
背景颜色：蓝色；
颜色：白色；
}
.topnav输入[类型=文本]{
显示：内联块；
浮动：对；
宽度：20%；
填充：14px；
边界半径：1px；
背景色：白色；
利润率：6px；
框大小：边框框；
大纲：无；
过渡：0.1s；
边框：3倍纯色透明；
}
.topnav输入[类型=文本]：悬停{
边框：3件纯蓝；
}

@Nameless这有助于回答您的问题吗？@Nameless是的。这比我想象的要简单，而且很有效。但是，我很想知道为什么将宽度设置为

auto

不起作用。因为高度仍然在变化。默认情况下，输入元素也有2px边框。@TannerDolby toNameless@TannerDolby你以几秒之差领先。另外，你的声望比他高，但你的回答很好。