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

Question

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

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

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

这是当前代码：

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 上。查看更新的 sn-p。

/* 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 -->