css - 隐藏先前边框的最佳方法？

Question

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

当我在当前选定的 div 上时，我想隐藏它。有任何想法吗？

小提琴

<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;
}