Не работет :hover в выподающем меню

201

29 апреля 2019, 18:10

В общем я хочу чтобы объекты класса .line при наведении на .list передвигались. Далее я планирую объектам класса .line назначить разные transition delay.

Или эта магия работает только с ul and li и я зря потратил 3-4 часа.

* { 
  padding: 0; 
  margin: 0; 
  font-family: 'Federant', cursive; 
  font-size: 1vw; 
  box-sizing: border-box; 
} 
 
.menu { 
  margin: 5vw; 
  width: 10vw; 
} 
 
p { 
  border-bottom: 0.1vh solid white; 
  text-align: center; 
  padding: 2vh; 
  background: rgb(151, 101, 101); 
  width: 10vw; 
  height: 6vh; 
} 
 
.line, 
.line2, 
.line3 { 
  position: relative; 
} 
 
.line { 
  left: 500%; 
} 
 
.line2 { 
  top: -22vh; 
  display: none; 
} 
 
.line3 { 
  top: -45vh; 
  left: 25vw; 
  display: none; 
} 
 
.list:hover .line { 
  left: 100%; 
}

<div class="menu"> 
  <p class="list"> Paragraf</p> 
  <p class="list2"> Paragraf</p> 
  <p class="list3"> Paragraf</p> 
  <p class="line">Subparagraf</p> 
  <p class="line">Subparagraf</p> 
  <p class="line">Subparagraf</p> 
  <p class="line">Subparagraf</p> 
  <p class="line">Subparagraf</p> 
  <p class="line2">Subparagraf</p> 
  <p class="line2">Subparagraf</p> 
  <p class="line2">Subparagraf</p> 
  <p class="line2">Subparagraf</p> 
  <p class="line2">Subparagraf</p> 
  <p class="line3">Subparagraf</p> 
  <p class="line3">Subparagraf</p> 
  <p class="line3">Subparagraf</p> 
  <p class="line3">Subparagraf</p> 
  <p class="line3">Subparagraf</p> 
</div>

Answer 1

В css у псевдо класса :hover ограниченные возможности.

Обычно :hover Используют для воздействия родителя на дочерний элемент...

Можно на на соседа .list:hover~.line , но при условии иерархии расположен ниже и обязательно у этих элементов один родитель

* { 
  padding: 0; 
  margin: 0; 
  font-family: 'Federant', cursive; 
  font-size: 35px; 
} 
 
.menu { 
  width: 250px; 
  background: rgb(151, 101, 101); 
} 
 
.list:hover~.line { 
  background: rgb(11, 201, 101); 
}

<div class="menu"> 
  <p class="list"> list</p> 
  <p class="line"> line</p> 
</div>

Во-втором варианте это не сработает

* { 
  padding: 0; 
  margin: 0; 
  font-family: 'Federant', cursive; 
  font-size: 35px; 
} 
 
.menu { 
  width: 250px; 
  background: rgb(151, 101, 101); 
} 
 
.line:hover~.list { 
  background: rgb(11, 201, 101); 
}

<div class="menu"> 
  <p class="list"> list</p> 
  <p class="line"> line</p> 
</div>

Так же и в этом варианте не сработает

* { 
  padding: 0; 
  margin: 0; 
  font-family: 'Federant', cursive; 
  font-size: 35px; 
} 
 
.menu { 
  width: 250px; 
  background: rgb(151, 101, 101); 
} 
 
.list:hover~.line { 
  background: rgb(11, 201, 101); 
}

<div class="menu"> 
  <p class="list"> list</p> 
</div> 
 
<p class="line"> line</p>

Answer 2

.list:hover ~ .line {
    left: 100%;
}

Пробуй так.

Когда ты делаешь это через пробел - ты будешь применять это к тем блокам, которые находятся внутри блока с классом .list

div p – элементы p, являющиеся потомками div. (те, которые находятся внутри него)

div ~ p – правые соседи: все p на том же уровне вложенности, которые идут после div.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

div сразу по div

Подскажите пожалуйста, есть 4 блока:

174

HTML

Эфект при наведение мышкой css

при наведение на ссылку она меняет свой цвет во так

192

HTML

Как разделить регистрационную форму на 2 части

Есть большая регистрационная форма с более чем 20+ полямиИдея заключается в следующем, разделить ее на две формы, в 1 форму оставить обязательные...

184

HTML

Скролл до элемента

Как сделать так, чтобы срабатывало событие, когда элемент находится посередине экрана, как на этом сайте https://byjaktcom/contact/?

163