所以我用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>
答案 0 :(得分:3)
答案 1 :(得分:0)
好。我现在清楚地得到了描述。
我认为你需要在这里使用一些脚本。 请查看以下代码段。
<强>脚本
$('nav .menu').hover(function () {
$(this).toggleClass('active');
});
CSS添加
nav > .menu.active{
border-bottom: 3px solid #ddd;
}
答案 2 :(得分:0)
使用纯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;
}
希望这会有所帮助