0

Здравствуйте. Есть такой код:

<ul className="vertical medium-horizontal menu">
    <li>
        <a className="dropdown button" href="#">1</a>
        <a  href="#">1</a>
    </li>
</ul>

Эффект для анимации при наведении на stylus

li a:first-child
  background-color #ff8731
  background-size 100% 200%
  background-image linear-gradient(to bottom, #ff8731 50%, #fff 50%)
  transition background-position 0.3s

li a:last-child
  background-color #fff
  background-size 100% 200%
  background-image linear-gradient(to bottom, #fff 50%, #ff8731 50%)
  border-top 1px solid #fff
  border-top-left-radius 0
  border-top-right-radius 0
  color #0073AE
  display none
  margin-top -10px
  transition background-position 0.3s

li a:last-child:hover
  background-position 0 -100%
  color #fff

Вопрос: как сделать так, чтоб при наведении на a:last-child у a:first-child запускалась такая же анимация, как и у a:last-child?

1 ответ 1

1

Никак. CSS может влиять на стили вложенных элементов и элементов, находящихся после элемента инициатора, при помощи оператора

.style1 + .style2 {
  background: red;
}

<div class='style1'></div>
<div class='style2'></div> //будет красный


<div class='style1'></div>
<div></div>
<div class='style2'></div> //не будет красный

тут пример того, как можно получить, почти то, что тебе надо: (Наводи на первый элемент) http://plnkr.co/edit/ewIBeWXiQnPbuqyOACvu?p=preview


Как вариант, можно при наведении на родителя добавлять стили первому и последнему элементу, но я думаю ты уже об этом думал...

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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