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

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