html - 鼠标悬停 - 隐藏边框？

Question

当鼠标悬停在任何元素上时，如何隐藏右侧的边框？目前，所有元素都设置为 border-left: 1px solid #ccc;

参见示例:http://jsfiddle.net/ktsyf8wf/

HTML

<div style="background-color: #ffffff; padding: 10px; border-bottom: 1px solid #ccc">
    <ul class="monitoring-tabs">
        <li>Item 1</li>
        <li>item 2</li>
        <li class="active">Item 3</li>
        <li>Item 4</li>
    </ul>
</div>

CSS

.monitoring-tabs {
    list-style-type: none;
    padding: 0;
    margin: 0;
    clear: both;
    overflow: hidden;
    line-height: 25px;
}

.monitoring-tabs li {
    float: left;
    font-size: 13px;
    border-left: 1px solid #ccc;
    padding: 0 17px;
    color: #4e5665;
    line-height: 30px;
}

.monitoring-tabs li:first-child {
    border-left:  1px solid #ffffff;
}

.monitoring-tabs li:hover {
    background-color: #e9eaed;
    border-left:  1px solid #ffffff;
}
.monitoring-tabs .active {
    font-weight: bold;
    color: black;
}

Answer 1

只需将其添加到您的 CSS 中

.monitoring-tabs li:hover + li {
    border-left:  1px solid #ffffff;
}

fiddle - http://jsfiddle.net/953zgrhm/