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

Question

我目前有一个导航栏，其中包含“Home，About，Resume，Contact”的典型链接。

我目前有代码，所以当你将鼠标悬停在Resume上时（默认情况下箭头指向下方），会出现一个下拉列表，箭头方向会变为使用两个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; }

Answer 1

您需要更改触发相应箭头span的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 -->