Ich entwickle die linke Navigation. Ich möchte, dass der rote Balken beim Schweben vor dem Menüpunkt angezeigt wird. Dies funktioniert für das Element „Home“ und seine Unterelemente, andere Stammelemente führen jedoch dazu, dass sich beim Hover ein roter Balken über die gesamte Breite der Seite von oben nach unten erstreckt.
$(document).foundation();
.vertical.dropdown.menu [href] > i {
display: block;
}
.vertical.dropdown.menu [href] {
display: block;
text-align: center;
}
.left-bar {
position: fixed;
top: 0;
left: 0;
width: 150px;
height: 100%;
color: #333;
background: #FFFFFF;
}
.left-bar .vertical.menu.nested {
padding: 0;
}
.left-bar [href] > i {
display: block;
}
.left-bar [href] {
display: block;
text-align: left;
padding: 0;
color: #333;
}
.left-bar [href]:hover {
background: #9B9B9BFF;
}
.left-bar .vertical.menu > li {
position: relative;
background: #FFFFFF;
color: #333;
border: 0;
}
.left-bar .top-level-item [href]:hover::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 5px;
background-color: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.1/js/foundation.min.js"></script>
<ul class="vertical dropdown menu left-bar" data-dropdown-menu>
<li class="top-level-item">
<a href="#">
<i class="zmdi zmdi-home zmdi-hc-3x"></i>
<span>Home</span>
</a>
<ul class="vertical menu nested">
<li><a href="#"><i class="zmdi zmdi-list zmdi-hc-3x"></i> Sub Item 1</a></li>
<li><a href="#"><i class="zmdi zmdi-list zmdi-hc-3x"></i> Sub Item 2</a></li>
<!-- ... -->
</ul>
</li>
<li class="top-level-item">
<a href="#">
<i class="zmdi zmdi-account zmdi-hc-3x"></i>
<span>Account</span>
</a>
</li>
<li class="top-level-item">
<a href="#">
<i class="zmdi zmdi-settings zmdi-hc-3x"></i>
<span>Settings</span>
</a>
</li>
<li class="top-level-item">
<a href="#">
<i class="zmdi zmdi-help-outline zmdi-hc-3x"></i>
<span>Help</span>
</a>
</li>
<!-- ... -->
</ul>
Wie kann ich das Problem beheben, sodass der rote Balken nur die Höhe des Menüelements einnimmt?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
我对 CSS 进行了更改，并在那里添加了注释。基于 DOM 结构的 CSS 选择器存在问题
.left-bar.vertical.menu li而不是.left-bar .vertical.menu > li，我删除了空格和>，以便所有li现在都具有相对位置.vertical.dropdown.menu [href] > i { display: block; } .vertical.dropdown.menu [href] { display: block; text-align: center; } .left-bar { position: fixed; top: 0; left: 0; width: 150px; height: 100%; color: #333; background: #FFFFFF; } .left-bar .vertical.menu.nested { padding: 0; } .left-bar [href] > i { display: block; } .left-bar [href] { display: block; text-align: left; padding: 0; color: #333; } .left-bar [href]:hover { background: #9B9B9BFF; } /* I made a change here */ .left-bar.vertical.menu li { position: relative; background: #FFFFFF; color: #333; border: 0; } .left-bar .top-level-item [href]:hover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background-color: red; }我为红色留了一个边框；最初设置为白色。
我做了更改：
[href]我认为“脆弱”background-color以清晰rem而不是px，因为典型的浏览器使用16px=1rem大小基础；如果需要，您可以强制支持那些不这样做的人。如果您希望容器继续具有边框并使用 CSS 执行一些与此相关的操作，则可以决定子项目，如下所示： 悬停子元素时如何设置父元素的样式？ 或者也许使用一些简单的 JavaScript 来提供帮助。
.nav-item { width: 10rem; background-color: #FFFFFF; text-align: center; color: #333; border: 0; border-left-width: 0.25rem; border-left-style: solid; border-left-color: #FFFFFF; } .nav-item:hover { border-left-color: #FF0000; } .nav-item .nav-link:hover { background-color: #9B9B9BFF; } .nav-link { color: #333333; } .nav-link * { display: block; }