Создание выпадающего списка после: hover больше не активен - PullRequest
Новая
       26

Создание выпадающего списка после: hover больше не активен

0 голосов
/ 25 июня 2018

У меня есть простая панель навигации с выпадающим меню, которое должно оставаться, когда пользователь наводит курсор на свою уважаемую ссылку в панели навигации, но я не могу удержать ее после того, как пользователь наводит курсор на фактическое раскрывающееся меню, а не на его ссылку. Я попытался создать класс :hover с необходимым отображаемым значением в текущем раскрывающемся списке, но кажется, что есть место, когда мышь перемещается из ссылки в раскрывающийся список, поэтому он снова становится невидимым, прежде чем второй класс :hover сможет быть применены. 

.nav-link:hover {
  box-sizing: border-box;
  color: rgb(201, 49, 49);
  transition: 0.4s;
  border-bottom: 5px solid rgb(201, 49, 49);
  cursor: pointer;
}

.nav-dropdown {
  display: none;
  position: absolute;
  top: 75px;
}

.nav-link:active+.nav-dropdown {
  display: inherit;
  width: 12.5%;
  height: 200px;
  background-color: red;
}

.nav-dropdown:hover {
  display: block;
}
<div className="navbar">
  <div className="navbar-elements nav-link">Menu</div>
  <div className="nav-dropdown">Dropdown</div>
  <div className="navbar-elements nav-link">Events</div>
  <div className="navbar-elements nav-link">Reserve</div>
  <div className="navbar-elements">THE MINIMALIST</div>
  <div className="navbar-elements nav-link">Delivery</div>
  <div className="navbar-elements nav-link">About us</div>
  <div className="navbar-elements nav-link">Contacts</div>
</div>

Я бы предпочел оставить это просто HTML / CSS, если это возможно. Есть ли способ достичь желаемого поведения без большого количества рефакторинга? Спасибо!

1 Ответ

0 голосов
/ 25 июня 2018

Если вы используете обычный HTML, тогда он class, а не className;

Попробуйте поместить .nav-dropdown в .nav-link.

и добавьте эффект при наведениитаргетинг .nav-link:hover .nav-dropdown {}

.nav-dropdown {
  display: none;
  position: absolute;
  box-sizing: border-box;
  color: rgb(201, 49, 49);
  transition: 0.4s;
  border-bottom: 5px solid rgb(201, 49, 49);
  cursor: pointer;
}

.nav-link:hover .nav-dropdown {
  display: inherit;
  width: 12.5%;
  height: 200px;
  background-color: red;
}
<div class="navbar">
  <div class="navbar-elements nav-link">
    Menu
    <div class="nav-dropdown">Dropdown</div>
  </div>
  <div class="navbar-elements nav-link">Events</div>
  <div class="navbar-elements nav-link">Reserve</div>
  <div class="navbar-elements">THE MINIMALIST</div>
  <div class="navbar-elements nav-link">Delivery</div>
  <div class="navbar-elements nav-link">About us</div>
  <div class="navbar-elements nav-link">Contacts</div>
</div>
...