Question

对于我的HTML / CSS课程，我被分配到一个网页，并使其响应。其中一个条件是当屏幕尺寸在移动屏幕尺寸上时，我们必须制作汉堡包式菜单。

好吧，我想出了所有的事情，除了我如何去点击菜单下拉菜单项（只有css可能不可能，所以：active或：hover会这样做）。我们不允许使用任何JavaScript ..

我想知道如何在IMG悬停/活动时更改列表显示属性以阻止。

相关HTML部分：

    <div class="nav">
    <img id="hamburger" src="img/hamburger.png" alt="menu"/>
    <ul class="clearfix">
        <li><a href="#">Home</a></li>
        <li><a href="#">Info</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Sample</a></li>
        <li><a href="#">Lorem</a></li>
        <li><a href="#">Ipsum</a></li>
        <li><a href="#">Last</a></li>
    </ul><!-- Einde menu items -->
    </div><!-- Einde nav -->

移动屏幕的CSS：

@media screen and (max-width: 500px) {

.mobile-collapse {
    width: auto;
    float: none;
}
.hide-mobile {
    display: none;
}
.nav {
    padding-left: 0%;
}
.nav ul li {
    display: none;
}
.nav img {
    display: block;
    height: 50px;
}
}

总而言之，我想知道当.nav ul li悬停时我如何将display:block更改为.nav img。

Answer 1

我想知道如何更改.nav ul li来显示：阻止时间 .nav img徘徊

你应该使用兄弟选择器，一个〜的代字号。

您的代码应该是......

.nav img:hover ~ ul li {
  display: block;
}

试试吧。 CSS中的A good explanation of the tilde。

Answer 2

您可以使用代字号（Url: http://Example.com/ Method: MethodName）或加号（~）css运算符。

代字号运算符称为general sibling selector

加号运算符称为adjacent sibling selector

.nav img:hover ~ ul li {
  display: block;
}

CSS / HTML - 带有CSS的汉堡菜单

2 个答案: