隐藏以前边界的最佳方法？

Question

我有一个带有几个div的菜单。每个div都有一个1px的左边框。在悬停时，我会更改当前div的背景，但正如您在下面的JSFiddle中看到的那样，前一个（灰色）边框仍然可见，这很难看。

当我在当前选中的div上时，我想隐藏它。有什么想法吗？

Fiddle

<div id="main_menu">
    <div class="menu_item"><div class="link">Example</div></div>
    <div class="menu_item"><div class="link">Example</div></div>
    <div class="menu_item"><div class="link">Example</div></div>
    <div class="menu_item"><div class="link">Example</div></div>
</div>

为了更清楚，从这个：

对此：

可能没有使用任何JS。

Answer 1

将您的.menu_item悬停css更改为：

#main_menu .menu_item:hover {
    background-color:#00437f;
    cursor:pointer;
    position:relative;
    left:-1px;
}

并将文本保持在css以下的位置更新：

#main_menu .menu_item:hover .link {
    color:#fff;
    border:0px;
    position:relative;
    left:1px;
}