jquery - 在另一个元素悬停动画后更改背景图像

Question

如果您将鼠标悬停在 li 上，我想为导航上方的 Logo 设置动画效果元素。动画(X 翻转)应显示另一个基于 li 的 Logo 悬停在上面，然后 Xflip 回到原来的时候不再聚焦。问题似乎是 li埋在 nav 中+ ul Logo 位于 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

正如其他人所说，将鼠标悬停在列表项上时，您无法更改 Logo 的背景。

但是，一个选项可能是在原始 Logo 之上放置一个不同的 Logo ？这仅在某些情况下有效，例如 Logo 大小相同且不透明(因此您可以在下面看到其他 Logo )。

您可以在 <a> 上创建伪元素这会在悬停时改变不透明度，因此它会覆盖原始 Logo 。

基本概念:

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