HTML CSS hover 改变两个元素

Question

我需要在悬停菜单时显示两个动画，

1. 用下划线突出显示菜单文本。
2. 显示另一个子菜单。

下面是 CSS 和 HTML，其中在下面的代码中，菜单突出显示有效，但子菜单显示无效。

.menuText {
  text-decoration: none;
  position: relative;
  color: #ccc;
  padding-bottom: 2px;
  line-height: 70px;
  padding-right: 20px;
  cursor: pointer;
}

.menuText:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  border-bottom: 1px solid #fff;
  transition: 0.4s;
}

.menuText:hover:after {
  width: calc(100% - 15px);
}

.menuText:hover {
  text-decoration: none;
  color: #fff;
}

.menuText:active {
  color: #fff;
  text-decoration: none;
}

.navBar {
  width: 100%;
  height: 70px;
  background: rgba(20, 20, 20, .2);
  text-align: center;
  font-family: Catamaran;
  font-size: 14px;
}

.dropdown-content {
  visibility: hidden;
  opacity: 1;
  transition: visibility 0s, opacity .9s ease-in;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.menuText:hover .dropdown-content {
  display: block;
  visibility: visible;
  opacity: 1;
}

<div style="width:100%;height:100vh; background-image: url('./images/10.png');">

  <!-- --------------------- Top Menu ----------------------------------------- -->
  <div class="navBar">
  
    <a class="menuText"> HOME</a>
    <a id="buildingMenuID" class="menuText"> BUS</a>

    <div>

      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>

      <!-- --------------------- ------------------------------------------------- -->


      <div>

可能是什么问题，基本上我必须在用户将鼠标移到主菜单上时显示子菜单。

Answer 1

.dropdown-content 不是 .menuText 的后代，因此您的选择器 .menuText:hover .dropdown-content 将不执行任何操作。

.dropdown-content 是 div 的后代，后者又是 .menuText 的兄弟。

您正在寻找的选择器将是 .menuText:hover ~ div > .dropdown-content(请参见下面的示例)。

但是，由于 HTML 的结构方式，当任何 菜单项悬停时，子菜单将显示。我会建议重组您的 HTML，以便子菜单是菜单项的后代。类似于这个问题中的代码:Keep parent menu item highlighted after hovering over submenu (HTML/CSS/Jquery)

.menuText {
  text-decoration: none;
  position: relative;
  color: #ccc;
  padding-bottom: 2px;
  line-height: 70px;
  padding-right: 20px;
  cursor: pointer;
}

.menuText:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  border-bottom: 1px solid #fff;
  transition: 0.4s;
}

.menuText:hover:after {
  width: calc(100% - 15px);
}

.menuText:hover {
  text-decoration: none;
  color: #fff;
}

.menuText:active {
  color: #fff;
  text-decoration: none;
}

.navBar {
  width: 100%;
  height: 70px;
  background: rgba(20, 20, 20, .2);
  text-align: center;
  font-family: Catamaran;
  font-size: 14px;
}

.dropdown-content {
  visibility: hidden;
  opacity: 1;
  transition: visibility 0s, opacity .9s ease-in;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.menuText:hover ~ div > .dropdown-content {
  display: block;
  visibility: visible;
  opacity: 1;
}

<div style="width:100%;height:100vh; background-image: url('./images/10.png');">

  <!-- --------------------- Top Menu ----------------------------------------- -->
  <div class="navBar">
    <i class="material-icons" style="  font-size:22px;color:#ccc">home</i>
    <a class="menuText"> HOME</a>

    <i class="material-icons" style="  font-size:22px;color:#ccc">business</i>
    <a id="buildingMenuID" class="menuText"> BUS</a>

    <div>

      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>

      <!-- --------------------- ------------------------------------------------- -->


      <div>