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

Question

Я хочу анимировать логотип над моим навигатором, если вы наведите указатель мыши на элементы li. Анимация (X-флип) должна отображать другой логотип на основе li, на котором он витает, а затем Xflip возвращается к оригиналу, когда больше не фокусируется. Проблема, кажется, что li «s захоронены в 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, но гораздо менее искусен в этом.

Answer 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

Answer 2

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

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