如何实现鼠标hover某元素时显示其他元素 现有代码不生效如何解决

问题原因 #

你使用的+是CSS相邻兄弟选择器，仅能匹配紧接在当前元素后方的第一个同级元素。你的HTML结构中，.btn_login后面依次是<a>标签、<br>标签，最后才是.pwd_button，二者不是相邻同级元素，所以选择器无法匹配，样式不生效。

可行解决方案 #

方案1：修改CSS选择器（无需改动HTML结构） #

把相邻兄弟选择器+替换为通用兄弟选择器~，后者可以匹配当前元素后方所有同级的对应元素，修改后的CSS如下：

.pwd_button{
display: none;
border: 1px solid #13619f;
background: #2371b7;
padding: 5px;
color: white;
font-size: 15px;
}

.btn_login:hover ~ .pwd_button{
display: block;
}

方案2：调整HTML结构 #

如果你需要保留+选择器，只要把.pwd_button移动到.btn_login的紧后方即可，调整后的HTML如下：

<div class="right-account">
  <button class="btn_login">MY ACCOUNT</button>
  <button class="pwd_button">Change Password</button>
  <a href="../products/user_cart.php"><button class="btn_signup">MY CART</button></a><br>
</div>

补充优化 #

如果需要实现鼠标移动到显示出来的「Change Password」按钮上时，按钮不消失，可以把hover事件绑定到父元素上，修改选择器为：

.right-account:hover .pwd_button{
display: block;
}

只要鼠标在.right-account容器范围内，按钮就会保持显示状态。

内容的提问来源于stack exchange，提问作者Suraj Gautam