是否可以仅使用 CSS 在悬停时显示分隔符？答案

【问题标题】：Is it possible to display dividers on hover using only CSS?是否可以仅使用 CSS 在悬停时显示分隔符？
【发布时间】：2014-01-27 03:40:59
【问题描述】：

使用this post 的技术，我有一个很好的合理菜单栏。

但是，我想在鼠标悬停时出现的条目之间添加分隔线。

My first attempt 结果非常糟糕：

<div id="menu">
    <ul>
        <li>
            Item
        </li>
        <li>
            Menu
        </li>
        <li>
            Link
        </li>
        <li>
            Asdf
        </li>
      </ul>

        <span></span>
</div>

#menu {
    text-align: justify;
    background-color:gray;
    padding:5px;
}

#menu * {
    display: inline;
}

#menu li {
    display: inline-block;
    color:white;
}

#menu ul {
    padding-left:0px;
    margin:0px 100px;
}

#menu span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

#menu li:hover {
    color:blue;
    border-left:1px solid black;
    border-right:1px solid black;
}

上面的问题是菜单项之间的边框没有居中。

这对于 javscript 来说当然是可行的，但我想知道纯 CSS 是否可行。

【问题讨论】：

仅供参考，您的 HTML 格式不正确。您没有</ul> 标签和<span>s 作为<ul> 元素的子元素无效
而且...你的 CSS 坏了。 #menu li { ... font } 不完整
我认为我们都足够聪明，可以解决问题并向@gandalf3 提供必要的反馈，而不会指出微不足道的错误。

标签： css

【解决方案1】：

您可以做的一件事是在您的 li 中添加填充。

#menu li {
    display: inline-block;
    color:white;
    padding: 0 20px;
}

然后在你的悬停调用相同的填充，但也

 #menu li:hover {
     color:blue;
     border-left:1px solid black;
     border-right:1px solid black;

 }

问题在于它会在其他导航项目中产生轻微的抖动。因此，如果您愿意，可以添加 -1 边距来解决此问题。这就是我认为你想要的。如果我不正确，请详细说明您的问题。

这是我收到的输入的编辑。我还包括了一个过渡。

#menu li {
    display: inline-block;
    color:white;
    padding: 0 20px;
    border-left:1px solid rgba(255, 255, 255, 0);
    border-right:1px solid rgba(255, 255, 255, 0);
}

悬停状态

#menu li:hover {
    transition: border-color 0.5s ease;
    color:blue;
    border-left:1px solid rgba(255, 255, 255, 1);
    border-right:1px solid rgba(255, 255, 255, 1);
}

谢谢迪奥迪乌斯

Jsfiddle http://jsfiddle.net/cornelas/FtVM7/10/

【讨论】：

...或者你可以只为非悬停状态添加一个透明边框。
这样也行，to。感谢您指出这一点。

【解决方案2】：

这里的问题是您选择的技术无法用元素填充整个空间，而只是进行分布。如果您不必支持 IE7 或更低版本，我建议您使用table-cell 解决方案，那么border 可以按照您想要的方式工作：

#menu li {
    display: table-cell;
    width:1%;
    color:white;
    border:1px solid transparent;
    text-align:center;
    cursor:pointer;
}

查看Demo

【讨论】：