Question

所以我用flex创建了一个菜单。当菜单没有悬停时，我正在使用底部边框，表示用户将鼠标悬停在菜单上时可以选择的项目。

当用户在菜单上盘旋时，我想要擦除用户未将鼠标悬停在其他菜单上的底部边框。

我的代码可以删除悬停菜单后菜单的底部边框。

问题：我的代码无法删除悬停菜单之前菜单的底部边框。

JSfiddle Link：http://jsfiddle.net/Hiroga/pubLdtxh/

CSS：

/*
    ColorCombo Ref:http://www.colorcombos.com/color-schemes/107/ColorCombo107.html
    #6699CC
    #003366
    #C0C0C0
    #000044
*/

body {
    background-color:#000044;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size:14px;
}

/*Navigation*/
nav {
    display:flex;
    width:auto;
    height:auto;
    justify-content:center;
    align-content:center;
    background-color:#C0C0C0;
    border-radius:5px;
    box-shadow:5px 5px 5px;
}

nav > div {
    margin:5px;
    cursor:pointer;
    border-radius:5px;
}

.menu{
    border-bottom:3px solid black;
}

.menu > div {
    display:none;
}

.menu:hover{
    border-bottom:none;
}

.menu:hover ~.menu{
    border-bottom:none;
}

.menu:hover > div{
    display:flex;
    margin-top:3px;
    background-color:#C0C0C0;
    border-radius:5px;
    justify-content:center;
    align-content:center;
}

.menu:hover > div:first-child {
    border-top:3px solid black;
}

.menu:hover > div:last-child {
    border-bottom:3px solid black;
}

HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Sample Modern</title>
    <link href="styles.css" rel="stylesheet" />
    <script src="jquery-2.1.1.min.js"></script>
</head>
<body>
    <nav>
        <div>
            Home
        </div>
        <div class="menu">
            Menu
            <div>
                Item
            </div>
            <div>
                Item
            </div>
            <div>
                Item
            </div>
        </div>
        <div class="menu">
            Menu 2
            <div>
                Item 2
            </div>
            <div>
                Item 2
            </div>
            <div>
                Item 2
            </div>
        </div>
        <div class="menu">
            Menu 3
            <div>
                Item 3
            </div>
            <div>
                Item 3
            </div>
            <div>
                Item 3
            </div>
        </div>
    </nav>
</body>
</html>

Answer 1

查看此实时 `jsFiddle`

添加此内容，

.menu:not(:active){
    border-bottom:none;
}

Answer 2

好。我现在清楚地得到了描述。

我认为你需要在这里使用一些脚本。请查看以下代码段。

<强>脚本

$('nav .menu').hover(function () {
    $(this).toggleClass('active');
});

CSS添加

nav > .menu.active{
    border-bottom: 3px solid #ddd;
}

DEMO

Answer 3

使用纯css执行此操作似乎是不可能的，至少在带有父选择器的css4到达之前。直到那时javascript就在那里为你的救援。如果你想要一个CSS解决方案，它仍然不会隐藏前一个元素边框，但是让边框不展开看下面的解决方案

我创造了一个你提供的输入的小提琴。查看小提琴here

为每个菜单项添加了<span>标记
将border-bottom添加到.menu span

添加了css以移除悬停上<span>元素的边框底部

CSS添加：

 .menu span{
      border-bottom:3px solid black;
    }

 .menu:hover >span{
     border-bottom:none;
   }

希望这会有所帮助

你如何border-bottom：none;以前的菜单？

3 个答案:

查看此实时 `jsFiddle`

你如何border-bottom：none;以前的菜单？

3 个答案:

查看此实时 jsFiddle

查看此实时 `jsFiddle`