如何在鼠标悬停在 link-html Css 上时保持其他 link 的位置？

Question

我有一个 ul 列表，其中 float:right 用于 li。我想将其设置为页面中心。 margin 和 left 效果不佳。

我想当鼠标悬停在 link 上时，保持其他 link 的位置并且不要向前移动。

我的css代码是这样的：

#menu2 li a {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#menu2 li a:hover {
  border: none;
  font-size: 30px;
}
<!--===============================================================<!--===============================================================--> --> ul,
li {
  display: inline-block;
}
#menu2 ul {
  list-style-type: none;
  background-color: #003;
  text-align: center;
}
#menu2 li {
  float: left;
  list-style-type: none;
  padding: 15px 15px;
}
#menu2 {
  min-width: 800px;
  margin-top: 15%;
  right: 65% !important;
}
#menu2 li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  background-color: #093;
  transition: all 0.5s ease 0s;
  font-size: 18px;
  min-width: 95px;
  border-radius: 50px;
}

<div align="center" style="height:100%;width:100%;">
  <div class="menu" id="menu2" align="center">
    <ul>
      <li><a href="brands.php">Brands</a></li>
      <li><a href="contact.php">&nbsp;&nbsp;&nbsp;Contact&nbsp;&nbsp;&nbsp;</a></li>
      <li><a href="price.php">&nbsp;&nbsp;&nbsp;Price List&nbsp;&nbsp;&nbsp;</a></li>
      <li><a href="about.php">&nbsp;&nbsp;&nbsp;About&nbsp;&nbsp;&nbsp;</a></li>
      <li><a href="index0.php">&nbsp;&nbsp;&nbsp;Home&nbsp;&nbsp;&nbsp;</a></li>
    </ul>
  </div>
</div>

我该如何解决这个问题？？？我使用 a:after 但不起作用。

Answer 1

我已添加到您的 CSS，我将悬停文本大小更改为 25px，您的按钮宽度更改为 135px，并在锚标记中添加了 whitespace:nowrap。

发生的事情是，当您将鼠标悬停时，文本会变大并换行，因为它无法放入您的容器中，因此我关闭了换行，并且还使按钮容器的宽度变大以适应放大时的大小

我希望这就是您所追求的，因为悬停时按钮不再在页面上移动。

编辑：将 CSS 添加到您的 ul 标签 = float:left；所以您的按钮位于内部并获得深蓝色背景。

CSS

#menu2 li a {

  -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
       -o-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
          transition: all 0.3s ease;

}
#menu2 li a:hover {

  border:none;
  font-size:25px; /*Changed by Steve */

}

<!-- ===============================================================
<!--=============================================================== -->
-->
ul,li
{
 display:inline-block;  
}
 #menu2 ul 
{

    list-style-type: none;
    background-color: #003;
    text-align:center;
    float:left;

}


#menu2 li {

    float: left;
        list-style-type:none;
        padding:15px 15px;




}
#menu2 
{
    min-width:800px;
    margin-top:15%;
    right:65% !important;
}

#menu2 li a {
    display: table-cell; 
    vertical-align:middle; 
    color: white;
    text-align: center;
    text-decoration: none;
    background-color:#093;
    transition: all 0.5s ease 0s;
    font-size:18px;
    min-width:95px;
    width:135px; /*CHANGED by Steve*/
    height:48.8px; 
    border-radius: 50px;
    white-space:nowrap; /*ADDED by Steve */

}

Answer 2

通过将 li 替换为 div 并使用以下属性编写 CSS 样式并更改 div 的 CSS 代码，问题已解决。谢谢大家

   <div align="center" style="height:100%;width:100%;">
              <div class="menu" id="menu2" align="center"   >
                                <div  style="z-index:18;position:absolute;margin-right:25px;text-align:center;vertical-align:middle;" align="center" ><a href="brands.php">Brands</a></div>
                                <div style="z-index:17;position:absolute;margin-right:155px;"><a href="contact.php">&nbsp;&nbsp;&nbsp;Contact&nbsp;&nbsp;&nbsp;</a></div>
                                <div style="z-index:16;position:absolute;margin-right:265px;"><a href="price.php">&nbsp;&nbsp;&nbsp;Price List&nbsp;&nbsp;&nbsp;</a></div>
                                <div style="z-index:15;position:absolute;margin-right:405px;"><a href="about.php">&nbsp;&nbsp;&nbsp;About&nbsp;&nbsp;&nbsp;</a></div>
                                <div style="z-index:14;position:absolute;margin-right:520px;"><a href="index0.php">&nbsp;&nbsp;&nbsp;Home&nbsp;&nbsp;&nbsp;</a></div>

              </div>
 </div>

如何在鼠标悬停在 link-html Css 上时保持其他 link 的位置？

how to keep position of other link when mouse is over a link-html Css?

html

position

list

fixed

hover

CSS