带有链接的 li 内的 span 标签在悬停时移动

Posted 2023-03-06

【中文标题】带有链接的 li 内的 span 标签在悬停时移动

【英文标题】：span tag inside li with link is moving on hover

【发布时间】：2016-03-29 23:01:46

【问题描述】：

我有以下 html。当我将鼠标悬停在最后一个 li 上时，应该会生成一个边框。当我将鼠标悬停在最后一个li 上时，其他 li 正在移动。

我已经解决了这两个问题。

list item width height issue fixed with span inside li

我无法停止移动元素。

HTML：

<div class="menu_right">
  <ul class="menu">
    <li><a href="#">Text 1</a></li>
    <li><a href="#">Text 2</a></li>
    <li class="your_space"><a href="#"><span>Text3</span></a></li>
  </ul>
</div>

请查看我的jsfiddle。

这可能是一个简单的问题。但我无法找到解决方案。

【参考方案1】：

在所有其他<li> 上使用透明的border 以使其良好。

ul.menu li 
  float: left;
  list-style-type: none;
  border: 2px solid transparent;

小提琴：https://jsfiddle.net/8cu4bL3s/

【参考方案2】：

请将border: 2px solid transparent;添加到所有的li

.menu_right 
  float: right;

ul.menu li 
  float: left;
  list-style-type: none;
  border: 2px solid transparent;

ul.menu li a 
  text-decoration: none;

li.your_space 
  width: 100px;

li.your_space:hover 
  border: 2px solid black;

li.your_space a>span 
  display: block;

<div class="menu_right">
  <ul class="menu">
    <li><a href="#">Text 1</a>
    </li>
    <li><a href="#">Text 2</a>
    </li>
    <li class="your_space"><a href="#"><span>Text3</span></a>
    </li>
  </ul>
</div>

另一种解决方案

将padding:2px; 添加到所有 li 并在悬停时删除悬停 li 的填充并为其添加边框 添加这个 CSS

.menu_right
  float:right;

ul.menu li
  float: left;
  list-style-type: none;
  padding:2px;

ul.menu li a
  text-decoration:none;

li.your_space
  width:100px;

li.your_space:hover
  border: 2px solid black;
  padding:0;

li.your_space a>span
  display:block;

【参考方案3】：

课程块将移动，您添加一个 2 像素边框（左 + 右 = 4 像素）。作为替代方案，我可以提出“outline”

li.your_space:hover
  outline: 2px solid black;

【参考方案4】：

解释： 这是因为您在悬停时设置了border 属性，这会导致li 将边框属性添加到其height / width。

您需要在所有li 上独立设置transparent 边框，因此当您将鼠标悬停在任何li 上时，您不会添加边框而是更改其颜色。

ul.menu li 
  border: 2px solid transparent;