Question

我正在尝试使用悬停状态制作某种垂直菜单。我想我想让每个菜单项在悬停和1px底部边框上都有1-px彩色条。我不能同时使用它们因为边框与45度重叠，因此我将使用底部边框而不是整个菜单项宽度。在这里，通过应用：

，我有一些几乎可以工作http://jsfiddle.net/Wa568/1/的东西

div.box::after {
  content: "";
  position: absolute;
  bottom: 0; top: 0px; left: 0; right: 0;
  border-bottom: 1px solid #000; 
}

特技。边框现在不会重叠45度，但我想要的是一直有黑色底部1px边框（当没有悬停时）覆盖整个菜单项块，当悬停绿色左边框应该显示重叠完全左下边缘的底部。

包含内部块的解决方案，宽度为100％，顶部为-1，并且不接受jquery操作。

Answer 1

这将为您完成这项工作。纯CSS。不需要额外的元素。

DEMO http://jsfiddle.net/Wa568/3/

CSS：

div.box {
    position: relative;
    width: 200px;
    padding: 15px 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #ccc;
    border-left: 10px solid transparent;
}
div.box:hover {
    border-left: 10px solid #0a0;
}
div.box:after {
    display:block;
    position: absolute;
    bottom: 0;
    left:-10px;
    width:calc(100% + 10px);
    height:1px;
    border-bottom: 1px solid #000;    
    content: " ";
}
div.box:hover:after {
    width:100%;
    left:0px;
}

HTML：

<div class="box">awesome content</div>

使边框不会在视觉上重叠

1 个答案: