html - 将鼠标悬停在下拉元素上时更改下拉按钮的内容

我目前有一个带有典型链接“主页，关于，简历，联系方式”的导航栏。

我目前有代码，因此当您将鼠标悬停在“继续”上时（默认情况下有一个向下的箭头），会出现一个下拉菜单，并且箭头的方向会更改为使用两个span类的指向（下面的代码）。

我想要实现的是，将鼠标悬停在下拉菜单内容上时，箭头仍指向上方（当前，将鼠标悬停在下拉链接上时会恢复为指向下方）。

这是当前代码：

CSS / HTML：

/* Navbar links besides Resume */
.container1 {
    overflow: hidden;
	font-family: Cabin,Helvetica,Arial,sans-serif; /*changes font of name, about, contact*/
	text-align: center;
}

/*Navbar links besides Resume */
.container1 a {
    display: inline;
    font-size: 30px;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    display: inline;
    vertical-align: middle;
}

/* Affects Resume*/
.dropdown .dropbtn {
	display: inline;
    font-size: 30px;
    font-family: Cabin,Helvetica,Arial,sans-serif;
    border: none;
    outline: none;
    color: inherit;
    padding: 14px 16px;
    background-color: inherit;
}

/* color of Resume when hovered */
.container a:hover, .dropdown:hover .dropbtn {
    background-color: inherit;
}

button .hover { display: none; }
button:hover .no_hover { display: none; }
button:hover .hover { display: inline; }

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    left: 52.3%;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}


/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

    <div class="container1">
      <a id="home" href="#">Michael Geng</a>
      <a id="about" href="#">About</a>
      <div class="dropdown">
        <a id = "resume" href="#"><button class="dropbtn">
            <span class="no_hover">Resume &#9660</span>
            <span class="hover">Resume &#9650</span>
        </button></a>
        <div class="dropdown-content">
          <a id = "objective" href="#">Objective</a>
          <a id = "education" href="#">Education</a>
          <a id = "skills" href="#">Skills</a>
        </div> <!-- dropdown-content -->
      </div> <!-- dropdown -->
      <a id="contact" href="#">Contact</a>
      </ul>
    </div> <!--container1 -->

我当前认为这行代码是将鼠标悬停在下拉菜单内容上以更改显示，但是我没有使它起作用：

.dropdown-content:hover ~ .no_hover{display: none; }
.dropdown-content:hover ~ .hover{display: inline; }

最佳答案

您需要更改将鼠标悬停在span上的CSS，该CSS会触发相应箭头.dropdown的显示。查看更新的代码段。

/* Navbar links besides Resume */
.container1 {
    overflow: hidden;
	font-family: Cabin,Helvetica,Arial,sans-serif; /*changes font of name, about, contact*/
	text-align: center;
}

/*Navbar links besides Resume */
.container1 a {
    display: inline;
    font-size: 30px;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    display: inline;
    vertical-align: middle;
}

/* Affects Resume*/
.dropdown .dropbtn {
	display: inline;
    font-size: 30px;
    font-family: Cabin,Helvetica,Arial,sans-serif;
    border: none;
    outline: none;
    color: inherit;
    padding: 14px 16px;
    background-color: inherit;
}

/* color of Resume when hovered */
.container a:hover, .dropdown:hover .dropbtn {
    background-color: inherit;
}

button .hover { display: none; }
.dropdown:hover .no_hover { display: none; }
.dropdown:hover .hover { display: inline; }

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    left: 52.3%;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}


/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

    <div class="container1">
      <a id="home" href="#">Michael Geng</a>
      <a id="about" href="#">About</a>
      <div class="dropdown">
        <a id = "resume" href="#"><button class="dropbtn">
            <span class="no_hover">Resume &#9660</span>
            <span class="hover">Resume &#9650</span>
        </button></a>
        <div class="dropdown-content">
          <a id = "objective" href="#">Objective</a>
          <a id = "education" href="#">Education</a>
          <a id = "skills" href="#">Skills</a>
        </div> <!-- dropdown-content -->
      </div> <!-- dropdown -->
      <a id="contact" href="#">Contact</a>
      </ul>
    </div> <!--container1 -->