Question

如果您将鼠标悬停在li元素上，我想为导航上方的徽标设置动画。动画（X翻转）应根据正在上面的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，但对此并不熟悉。

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文档中的主选择器

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

2 个答案: