Как повлиять на элемент вне элемента div при наведении - PullRequest
Новая
       5

Как повлиять на элемент вне элемента div при наведении

0 голосов
/ 31 января 2019

Я пытаюсь создать подменю за пределами элемента div, который я собираюсь парить.Я пробовал несколько вещей, чтобы получить эту работу, но мне пока не повезло.Подменю должно быть за пределами ссылок div для целей проектирования.

Какой лучший способ заставить это работать? 

.header {
  display: flex;
  padding: 20px 0;
}

.nav {
  max-width: 1100;
  width: 100%;
  margin: auto;
}

.nav a {
  margin: 0 35px 0 0;
  color: #333333;
  transition: 0.5s ease;
}

#sub-menu {
  position: relative;
  width: 100%;
  background: #333;
  height: 150px;
  display: none;
  margin-top: 20px;
  max-width: 100%;
}

.three:hover #sub-menu {
  display: block
}
<div class="header">
  <div class="nav">
    <a class="one" href="#">Home</a>
    <a class="two" href="#">About</a>
    <a class="three" href="#">Services</a>
    <a class="four" href="#">Contact</a>
  </div>
  <div id="sub-menu"></div>

1 Ответ

0 голосов
/ 31 января 2019

Такое поведение не может быть достигнуто только css, вам нужен код JS.И вот почему: чтобы облегчить эту ситуацию, CSS предоставляет 3 селектора

Чтобы применить изменения стиля к дочерним элементам div + Чтобы применить изменения стиля к непосредственному дочернему элементу родительского div ~ Чтобы применить изменения стиля квсе последующие потомки родительского div

Но нет способа напрямую изменить div на два уровня вверх (бабушка и дедушка: P) с помощью этих селекторов ... так что вам может понадобиться немногоJS Надеюсь, я правильно ответил на этот вопрос

Ссылка https://techbrij.com/css-selector-adjacent-child-sibling

...