0

В общем я хочу чтобы объекты класса .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>

2
  • 1
    Возможный дубликат вопроса: Смена картинки на CSS. Анимация
    – Air
    18 ноя 2018 в 18:31
  • @Air, на взгляд дилетанта (а ведь желательно, чтобы ответ был понятен и дилетантам) совершенно непонятно, как применить изложенное в приведённой ссылке к данному вопросу. т.е., требуются разъяснения, т.е. это не дубликат. 19 ноя 2018 в 16:29

2 ответа 2

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

Пробуй так.

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

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

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

0

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

2

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.