Изменить фоновое изображение после анимации при наведении на другой элемент

0

Я хочу анимировать логотип над моим навигатором, если вы наводите на себя элементы li. Анимация (Х флип) должен показать другой логотип на основе li время завис на, затем Xflip назад к оригиналу, когда больше не сфокусирована. Проблема заключается в том, что li похоронены в nav + ul а логотип находится в div вне этой области и прикрепляется в качестве фонового изображения к a (см. Ниже):

<section id="header">
            <div class="logo"><a href="/"></a></div>
            <nav>
                <ul>
                    <li><a class="a" href="#">Link 1</a></li>
                    <li><a class="b" href="#">Link 2</a></li>
                    <li><a class="c" href="#">Link 3</a></li>
                    <li><a class="d" href="#">Link 4</a></li>
                </ul>
            </nav>
</section>

Я попытался сделать что-то вроде nav > ul > li:hover ~.logo > a {..changebG..} но это не сработало. Есть ли способ CSS для этого?

Я также попытался JQuery, но гораздо менее разбираюсь в этом.

  • 0
    В настоящее время это не может быть сделано в CSS, поскольку ни один из браузеров в настоящее время не поддерживает родительские методы.
Теги:

2 ответа

1
Лучший ответ

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

Однако возможно ли разместить другой логотип поверх оригинала? Это будет работать только в определенных ситуациях, например, если логотипы имеют одинаковый размер и не прозрачны (так что вы можете увидеть другой логотип ниже).

Вы можете создать псевдоэлемент на <a> который изменяет непрозрачность при наведении, поэтому он охватывает оригинальный логотип.

Основная концепция:

li a:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  width: 100px;
  height: 50px;
  opacity: 0;
}

li a:hover:before {
  opacity: 1;
}

li a.a:before {
  background: url("http://placehold.it/100x50/ff0000");
  top: 0;
}

li a.b:before {
  background: url("http://placehold.it/100x50/000000");
  top: 0;
}

li a.c:before {
  background: url("http://placehold.it/100x50/0066cc");
  top: 0;
}

li a.d:before {
  background: url("http://placehold.it/100x50/ffffcc");
  top: 0;
}

DEMO

Поделиться
  • 0
    Очень признателен. Как вы думаете, было бы чище сделать это в JQuery, поскольку мне нужно одновременно запустить анимацию и поменять изображения? К сожалению, логотипы разных размеров и прозрачны. Только их высота одинакова.
  • 0
    Я подозреваю, что с различными изображениями jQuery (или JavaScript) может быть подходящим вариантом. Вам нужно только переключить класс на логотипе или заголовке div в зависимости от того, какой элемент списка находится
0

Этого нельзя сделать, используя только CSS3. CSS3 не позволяет вам ссылаться на родительские элементы на основе зависания дочернего элемента. Для этого вам нужно использовать JavaScript.

Надеемся, что браузеры вскоре будут поддерживать родительский селектор, который будет показан в новой документации CSS4

Поделиться
  • 0
    Это возможно сделать с новыми селекторами CSS4, которые скоро будут внедрены, однако поддержка браузеров сейчас очень и очень минимальна. Также нужен JavaScript, а не jQuery, jQuery - это просто библиотека JavaScript.
  • 0
    Это верно. Я изменяю ответ на ссылку CSS3 и JS.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню