时间戳

首页 > 解决方案 > 如何在背景颜色悬停更改上保持容器的边框半径？

html - 如何在背景颜色悬停更改上保持容器的边框半径？

问题描述

我有一个下拉列表，border-radius在底角有一个，我想li在您将鼠标悬停在它们上时更改它们的颜色。但是，当您将鼠标悬停在最后一个列表项上时，会background-color覆盖边框半径。border-radius当我将鼠标悬停在最后一个项目上时，如何保留父容器的li？

.menu {
  max-width: 200px;
  list-style: none;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 0 0 10px 10px;
}
.menu .menu-item {
  padding: 0.5rem;
  border-bottom: 1px solid #ccc;
}
.menu .menu-item:last-child {
  border-bottom: none;
}
.menu .menu-item:hover {
  background-color: #222;
  color: #fff;
}
<ul class="menu">
    <li class="menu-item">A Menu Item Text</li>
    <li class="menu-item">A Menu Item Text</li>
    <li class="menu-item">A Menu Item Text</li>
    <li class="menu-item">A Menu Item Text</li>
    <li class="menu-item">A Menu Item Text</li>
</ul>

标签： htmlcss

解决方案

.menu {
  max-width: 200px;
  list-style: none;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 0 0 10px 10px;
}

.menu .menu-item {
  padding: 0.5rem;
  border-bottom: 1px solid #ccc;
}

.menu .menu-item:last-child {
  border-bottom: none;
  border-radius: 0 0 10px 10px;
}

.menu .menu-item:hover {
  background-color: #222;
  color: #fff;
}
<ul class="menu">
  <li class="menu-item">A Menu Item Text</li>
  <li class="menu-item">A Menu Item Text</li>
  <li class="menu-item">A Menu Item Text</li>
  <li class="menu-item">A Menu Item Text</li>
  <li class="menu-item">A Menu Item Text</li>
</ul>

即使将鼠标悬停在最后一个菜单选项上，这也会保持格式

推荐阅读