如何在悬停在其他元素上时显示元素答案

【问题标题】：How to display an element on hover over other element如何在悬停在其他元素上时显示元素
【发布时间】：2021-11-18 21:21:36
【问题描述】：

我想在悬停另一个按钮元素时显示一个按钮元素，但我的代码不起作用。

HTML 代码

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

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;
}

但是这段代码不起作用。

【问题讨论】：

标签： html css button hover

【解决方案1】：

尝试使用~:

const btn = document.querySelector('.btn_login')
const pwd = document.querySelector('.pwd_button')
btn.addEventListener('mouseover', () => {
  pwd.classList.add('showpwd')
})
pwd.addEventListener('mouseleave', () => {
  pwd.classList.remove('showpwd')
})

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

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

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

【讨论】：

谢谢，它成功了。但是当我从我的帐户按钮向下移动鼠标时，更改密码消失了。我怎样才能让它可见？
当我将鼠标悬停在我的帐户上时，会出现更改密码，但是当我无法将鼠标移动到更改密码时，因为一旦我将鼠标从我的帐户移开，它就会消失。所以，我想点击更改密码按钮，但我不能。
你可以用 JavaScript 做到这一点，我更新了答案，请看一下

【解决方案2】：

问题在于 + 组合符选择了直接兄弟，而密码按钮不是直接兄弟。但它是一个兄弟，所以你可以通过选择 tilda 来做你想做的事~

见MDN:

通用兄弟组合子如果你想选择一个元素的兄弟姐妹，即使他们不是直接相邻，那么你可以使用一般的兄弟组合器 (~)。

所以使用：

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

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

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

<div class="right-account">
  <button class="btn_login">MY ACCOUNT</button>

  <a href="../products/user_cart.php"><button class="btn_signup">MY CART</button></a><br>

  <button class="pwd_button">Change Password</button>

</div>

【讨论】：

【解决方案3】：

或者我们可以用这种替代方式：-D :-P =>

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

}

.btn_login:hover + .pwd_button{
/*display: inline-block;*/
display: block;
}

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

【讨论】：