Question

**我有一个搜索栏和一个搜索按钮，但是当我将鼠标悬停在它们上面时，它们会增长......？我在html / css中包含什么来阻止这种情况发生？提前致谢

HTML：

<form class="search2" method="get" action="default.html" />
<input class="search2" type="text" name="serach_bar" size="31" maxlength="255" value="" style="left: 396px; top: 159px; width: 246px;" />
<input class="search1" type="submit" name="submition" value="Search" style=" padding-bottom:20px; left: 646px; top: 159px; height: 21px" />
<input class="search2" type="hidden" name="sitesearch" value="_.html" />

CSS：

.search1
{
position: absolute;
font-family:"Arial Unicode MS";
background-color:#CCCCCC
}

.search2
{
position: absolute;
border-style:none;
font-family:"Arial Unicode MS";
color:black;
background-color:#CCCCCC;
}


input:hover{
    background-color:white;
    border-style:solid;
    border-color:white;
}

Answer 1

您的边框样式导致了问题。为避免这种情况，您可以使用outline代替border。

Answer 2

看起来你的鼠标悬停（悬停）正在将元素边框样式更改为“实体”，这很可能导致表单移动几个像素。将其从悬停css中删除，看看它是否有效。

如何阻止html中增长的东西？

2 个答案: