防止垂直菜单出现双边框

Question

我正在创建一个垂直菜单，我的 CSS 样式意味着当我 select 或将鼠标悬停在按钮上时会添加一个边框。问题是，当将按钮悬停在 selected 按钮下方时，会创建一个双边框（底部和顶部），如下所示：

我的代码是这样的：

ul {
  list-style-type: none;
}

.selected {
  background-color: #f9f9f9;
  border: 1px solid #dcdee2;
  border-radius: 1px;
}

.card {
  cursor: pointer;
  padding: 7px 0 7px 20px;
}
 
.card:hover {
  background-color: #f9f9f9;
  border: 1px solid #dcdee2;
  border-radius: 1px; 
}

.selected a {
  font-weight: bold:
}

.card a {
  color: #121212;
}

<ul>
  <li class="card selected">
    <a href="#">Home</a>
  </li>
  <li class="card">
    <a href="#">Information</a>
  </li>
</ul>

我该如何解决这个问题？

Answer 1

ul {
  list-style-type: none;
}

.selected {
  background-color: #f9f9f9;
  border: 1px solid #dcdee2;
  border-radius: 1px;
}

.card {
  cursor: pointer;
  padding: 7px 0 7px 20px;
}
 
.card:hover {
  background-color: #f9f9f9;
  border: 1px solid #dcdee2;
  border-radius: 1px; 
}

.selected a {
  font-weight: bold:
}

.card a {
  color: #121212;
}

.selected + .card:hover, .card:not(.selected):hover + .selected {
  border-top: none;
  }

<ul>
  <li class="card">
    <a href="#">Home</a>
  </li>
  <li class="selected card">
    <a href="#">Information</a>
  </li>
</ul>

当您将鼠标悬停时，内容会发生非常非常轻微的变化，但我相信您可以找到解决方法。

防止垂直菜单出现双边框

Prevent double borders in vertical menu

html

css

menu

border