将两个边框合二为一，并将每个功能设置为悬停li答案

【问题标题】：Combine two borders become one and set each function to the hover li将两个边框合二为一，并将每个功能设置为悬停li
【发布时间】：2014-10-04 06:47:08
【问题描述】：

我有两个问题：

首先：我有四个<li>，它的显示是内联块并且向左浮动。我希望 EACH <li> 具有红色边框底部的样式鼠标悬停。

第二：我想让文本的边框底部与其包装器的边框底部重叠（在这种情况下是<li>的<ul>。）

<ul id="menu">
   <li>one</li>
   <li>two</li>
   <li>three</li>
   <li>four</li>
</ul>

和

#menu {
  list-style:none;
}

#menu li {
  display:inline-block;
}

#menu:hover li {
display:inline-block;
border-bottom:solid 5px red;
}

这是我的Fiddle

在小提琴中，蓝色边框与红色边框分开。我希望它们成为一个边界。

【问题讨论】：

标签： html css

【解决方案1】：

只需将您的 CSS 更改为：

#menu li:hover {
    display:inline-block;
    border-bottom:solid 5px red;
    margin-bottom:-5px;
}

首先，您希望将:hover 应用到被悬停的单个li，而不是当ul is hovered, then you want to offset its bottom (achieved with a negativemargin-bottom`时应用的所有li）应用边框的宽度。

Demo Fiddle

【讨论】：

【解决方案2】：

试试这个平滑过渡

#menu li:hover {
   border-bottom:solid 5px red;
   margin-bottom:-5px;
}

【讨论】：