Question

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

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

小提琴 - http://jsfiddle.net/953zgrhm/

Answer 2

虽然我相信这是一种不好的做法，但您可以执行以下操作：

使用+运算符可以更改兄弟元素的属性。

.monitoring-tabs li:hover + li {
    border-left: {change here};
}

基本上，删除边框将是：

border-left: 0;

但是你会有一个缺失的像素，你会注意到一个“小故障”，所以另一种方法是只改变边框的颜色;

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

演示 - http://jsfiddle.net/ktsyf8wf/5/

Answer 3

也许你可以使用jquery来解决这个问题和这段代码：

$(".monitoring-tabs li").hover(function(){
$(".monitoring-tabs li").next().css({"border": "0" });
});

它可以删除边框，但鼠标悬停在边框后不会回到第一位，我的问题也有同样的问题

Answer 4

用以下

替换你的css

<style type="text/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-right: 1px solid #ccc;
            padding: 0 17px;
            color: #4e5665;
            line-height: 30px;
        }

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

            .monitoring-tabs li:hover {
                background-color: #e9eaed;
                border-right: none;
            }

        .monitoring-tabs .active {
            font-weight: bold;
            color: black;
        }
</style>

鼠标悬停 - 隐藏边框？

4 个答案: