Question

我有以下HTML。当我将鼠标悬停在最后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。

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

Answer 1

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

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

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

Answer 2

请为所有li添加border: 2px solid transparent;

＆＃13;

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

＆＃13;

<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>

＆＃13;

另一种解决方案

将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将边框属性添加到其height / width。

您需要在所有transparent上设置li个独立状态，因此当您悬停任何li时，您不会添加边框，而是更改其颜色。< / p>

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

Answer 4

当然块会移动，你添加一个2像素边框（左+右= 4px）。作为替代方案，我可以提议＆＃34; outline＆＃34;

@include file:...

里面标签里面的链接正在继续悬停

4 个答案: