你如何边界底部:没有;以前的菜单

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

当用户悬停在一个菜单上时，我想删除用户没有悬停鼠标的其他菜单的底部边框。

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

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

JSfiddle链接：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>

查看此直播`jsFiddle`

加上这个，

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

至少在带有父选择器的css4到来之前，用纯css做这件事似乎是不可能的。Untill然后javascript在那里拯救你。如果你想要一个CSS解决方案，它仍然不会隐藏以前的元素边界，但会使边界看起来不展开下面的解决方案

我已经用你的输入创造了一把小提琴。在这里查看小提琴

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

添加css以删除悬停上<span>元素的边界底部

CSS添加：

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

希望这对有帮助

好的。我现在明白了描述。

我认为你需要在这里使用某种脚本。请查看下面的代码片段。

脚本

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

CSS添加

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

演示

查看此直播`jsFiddle`

相关内容

最新更新

热门标签：

你如何边界底部:没有;以前的菜单

查看此直播jsFiddle

相关内容

最新更新

热门标签：

查看此直播`jsFiddle`