Question

I have followed a tutorial on w3schools解决navBar悬停问题以制作大型菜单。

我更改了代码的某些措词，但与教程中的内容完全一样。

当我将鼠标悬停在按钮类和上时，背景颜色的悬停将不会出现。

我已经使用了悬停方法:hover，但这仍然不能解决问题。

* {
    box-sizing: border-box;
}

.navBar {
    font-family: Arial;
    background-color: #333;
    overflow: hidden;
}

.navBar > a {
    float: left;
    font-size: 16px;
    color: #FFF;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.menuDropDown {
    float: left;
    overflow: hidden;
}

.menuDropDown > #menuButton {
    font-size: 16px;
    border: none;
    outline: none;
    color: #FFF;
    padding: 14px 16px;
    background-color: inherit;
    font: inherit;
    margin: 0;
}

.navBar > a:hover > .menuDropDown:hover > #menuButton {
    background-color: #CCC;
}

.menuContent {
    display: none;
    position: absolute;
    background-color: none;
    width: 100%;
    left: 0;
    z-index: 1;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.menuDropDown:hover > .menuContent {
    display: block;
}

.menuColumn {
    float: left;
    width: 25%;
    padding: 10px;
    background-color: #CCC;
    height: 250px;
}

.menuColumn > a {
    float: none;
    color: #000;
    padding: 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.menuColumn > a:hover {
    background-color: #DDD;
}

.menuRow:after {
    content: "";
    display: table;
    clear: both;
}

<div class="navBar">
  <div class="menuDropDown">
    <button id="menuButton">Menu <i class="fas fa-bars"></i></button>
    <div class="menuContent">
      <div class="menuRow">
        <div class="menuColumn">
        </div>
      </div>
    </div>
  </div>
</div>

.navbar a:hover, .dropdown:hover .dropbtn { background-color: red; }

上面来自 w3schools 的本节允许您执行此操作。我改写了代码，但使用了完全相同的方法。它不想工作。

Answer 1

尝试一下：

#menuButton:hover,
.navBar > .menuDropDown:hover > #menuButton { 
    background-color: #CCC;
}

* {
    box-sizing: border-box;
}

.navBar {
    font-family: Arial;
    background-color: #333;
    overflow: hidden;
}

.navBar > a {
    float: left;
    font-size: 16px;
    color: #FFF;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.menuDropDown {
    float: left;
    overflow: hidden;
}

.menuDropDown > #menuButton {
    font-size: 16px;
    border: none;
    outline: none;
    color: #FFF;
    padding: 14px 16px;
    background-color: inherit;
    font: inherit;
    margin: 0;
}

#menuButton:hover, /*This added */
.navBar > .menuDropDown:hover > #menuButton {
    background-color: #CCC;
}

.menuContent {
    display: none;
    position: absolute;
    background-color: none;
    width: 100%;
    left: 0;
    z-index: 1;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.menuDropDown:hover > .menuContent {
    display: block;
}

.menuColumn {
    float: left;
    width: 25%;
    padding: 10px;
    background-color: #CCC;
    height: 250px;
}

.menuColumn > a {
    float: none;
    color: #000;
    padding: 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.menuColumn > a:hover {
    background-color: #DDD;
}

.menuRow:after {
    content: "";
    display: table;
    clear: both;
}

<div class="navBar">
  <div class="menuDropDown">
    <button id="menuButton">Menu <i class="fas fa-bars"></i></button>
    <div class="menuContent">
      <div class="menuRow">
        <div class="menuColumn">
        </div>
      </div>
    </div>
  </div>
</div>

如何使用按钮和<a href=""> in HTML

1 个答案: