Блог

Главная - Вопросы по программированию - Как отобразить элемент при наведении курсора мыши на другой элемент

Как отобразить элемент при наведении курсора мыши на другой элемент

#html #css #button #hover

Вопрос:

Я хочу отобразить элемент кнопки при наведении на другой элемент кнопки, но мой код не работает.

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

Но этот код не работает.

Ответ №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>

Комментарии:

1. Спасибо, это сработало. Но когда я немного перемещаю мышь вниз от кнопки «МОЯ УЧЕТНАЯ запись», смена пароля исчезает. Как я могу сделать это видимым ?

2. Когда я навожу курсор на СВОЮ УЧЕТНУЮ запись, появляется пункт Изменить пароль, но когда я не могу переместить мышь, чтобы изменить пароль, так как он исчезает, как только я убираю мышь из СВОЕЙ УЧЕТНОЙ ЗАПИСИ. Итак, я хочу нажать кнопку Изменить пароль, но не могу.

3. Вы можете сделать это с помощью JavaScript, я обновил ответ, посмотрите, пожалуйста

Ответ №2:

Проблема в том, что комбинатор выбирает непосредственного родного брата, а кнопка пароля не является непосредственным родным братом. Но это родной брат, так что вы можете делать все, что хотите, выбирая с помощью тильды ~

См. 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:

Или мы могли бы сделать это альтернативным способом 😀 😛 =>

 .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>
Метки: