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

Question

我有以下html。 当我将鼠标悬停在最后一个li ，将生成一个边界。 当我将鼠标悬停在最后一个li ，其他li也在移动。

我已经经历了这两个问题。

1. 列表项目宽度高度问题
2. 固定在锂内跨度

我无法停止移动元素。

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 。

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

Answer 1

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

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

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

Answer 2

请添加border: 2px solid transparent; 对所有的李

 .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;
}

Answer 3

说明：这是因为要在悬停上设置border属性，这会导致li将border属性添加到其height / width 。

您需要独立于所有li设置transparent边框，而li它们的状态如何，因此，当您将鼠标悬停在任何li ，都不会添加边框，而是会更改其颜色。

ul.menu li {
  border: 2px solid transparent;
}

Answer 4

当然，块会移动，您添加2像素边框（左+右= 4px）。 作为替代方案，我可以提出“ 大纲 ”

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