添加border-top

Question

正如您在我的代码段中看到的那样，只要将鼠标悬停在列表项上，就会添加顶部边框。我的问题是边框导致列表项向下移动2pxs。无论如何，在hover期间添加border时，列表项是否仍然保持原位？

＆＃13;

＆＃13;

#topnav {
	float: left;
	padding-top: 22px;
	width: 100%;
	text-align: center;
	font-size: .9em;
	background: #000000;
	font-family: Georgia, "Times New Roman", Times, serif;
}
#topnav li {
	display: inline-block;
	padding: 10px 12px 0 12px;
}
#topnav li:hover {
	border-top: 2px solid #0C3;
	color: #0C3;
}
#topnav a li {
	color: #FFF;
	line-height: 1.3em;
}

＆＃13;

<div id="topnav">
		  <ul>
			<a href="Spray-Foam-Parts-Repairs-Techs.php"><li class="last">TECH/PARTS/REPAIRS</li></a>
			<a href="Spray-Foam-school.php"><li>SPRAY FOAM SCHOOL</li></a>
			<a href="Used-For-sale-Spray-Foam-Insulation-Rigs-Machines.php"><li>USED/BUY/SELL</li></a>
			<a href="Spray-Foam-Rigs.php"><li>SPRAY FOAM RIGS</li></a>
			<a href="Spray-Foam-equipment.php"><li>SPRAY FOAM EQUIPMENT</li></a>
		  </ul>
		</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

最简单的方法，如果你可以节省2px - 只是一直有边框，但是在你盘旋之前让它与背景颜色相同。

#topnav {
  float: left;
  padding-top: 22px;
  width: 100%;
  text-align: center;
  font-size: .9em;
  background: #000000;
  font-family: Georgia, "Times New Roman", Times, serif;
}
#topnav li {
  display: inline-block;
  border-top: 2px solid black;
  padding: 10px 12px 0 12px;
}
#topnav li:hover {
  border-top: 2px solid #0C3;
  color: #0C3;
}
#topnav a li {
  color: #FFF;
  line-height: 1.3em;
}

<div id="topnav">
  <ul>
    <a href="Spray-Foam-Parts-Repairs-Techs.php">
      <li class="last">TECH/PARTS/REPAIRS</li>
    </a>
    <a href="Spray-Foam-school.php">
      <li>SPRAY FOAM SCHOOL</li>
    </a>
    <a href="Used-For-sale-Spray-Foam-Insulation-Rigs-Machines.php">
      <li>USED/BUY/SELL</li>
    </a>
    <a href="Spray-Foam-Rigs.php">
      <li>SPRAY FOAM RIGS</li>
    </a>
    <a href="Spray-Foam-equipment.php">
      <li>SPRAY FOAM EQUIPMENT</li>
    </a>
  </ul>
</div>

Answer 2

如果要保持相同的方向但只是在悬停时添加线条，则可以在悬停时补偿填充。 E.g。

#topnav li:hover {
  border-top: 2px solid #0C3;
  color: #0C3;
  padding-top: 8px; /* reduce top padding by 2px */
}

Answer 3

您必须为#topnav li元素设置默认边框，并将颜色设置为transparent，使其看起来没有边框。

#topnav li {
    display: inline-block;
    border-top: 2px solid transparent;
    padding: 10px 12px 0 12px;
}

然后在:hover

中

#topnav li:hover {
    border-top-color: #0C3;
    color: #0C3;
}

与下面的脚本一样：

#topnav {
	float: left;
	padding-top: 22px;
	width: 100%;
	text-align: center;
	font-size: .9em;
	background: #000000;
	font-family: Georgia, "Times New Roman", Times, serif;
}
#topnav li {
	display: inline-block;
    border-top: 2px solid transparent;
	padding: 10px 12px 0 12px;
}
#topnav li:hover {
	border-top-color: #0C3;
	color: #0C3;
}
#topnav a li {
	color: #FFF;
	line-height: 1.3em;
}

<div id="topnav">
  <ul>
    <a href="Spray-Foam-Parts-Repairs-Techs.php">
      <li class="last">TECH/PARTS/REPAIRS</li>
    </a>
    <a href="Spray-Foam-school.php">
      <li>SPRAY FOAM SCHOOL</li>
    </a>
    <a href="Used-For-sale-Spray-Foam-Insulation-Rigs-Machines.php">
      <li>USED/BUY/SELL</li>
    </a>
    <a href="Spray-Foam-Rigs.php">
      <li>SPRAY FOAM RIGS</li>
    </a>
    <a href="Spray-Foam-equipment.php">
      <li>SPRAY FOAM EQUIPMENT</li>
    </a>
  </ul>
</div>