Question

一直在努力工作，我已经看了很多地方，任何帮助都非常感激。

基本上我有一个由几个翻转图像组成的导航菜单（正常状态'左上'，悬停状态'左下'，它们当前配置为通过css单独翻转 - 这些看起来像这样：

<ul id="menu">
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="archives">Archives</a></li>
<li><a href="#" class="contact">Contact</a></li>
<li><a href="#" class="about">About</a></li>
</ul>

#menu {
list-style: none;
padding: 0;
margin: 0 auto;
height: 24.6em;
width: 79em;
position: relative;
}

#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}


#menu a:hover {
background-position: left bottom;}


#menu .home {
width: 520px;
height: 124px;
background: url(images/Home Menu.png) no-repeat;
left: 0px;
top: 122px;
}

#menu .archives {
width: 263px;
height: 57px;
background: url(images/Archives Menu.png) no-repeat;
left: 0px;
top: 189px;
}

and so on for the rest of the links.

现在我想要实现的是，当我将其中任何一个悬停时，让它们全部翻转。所以说我在“档案馆”上空盘旋;以下内容将翻阅“档案，联系，关于”

我已经尝试了以下内容并且它不起作用（opacity子句完全按照我的意愿执行，但由于某种原因，这似乎不适用于“background-position”）：

#menu:hover .archives {background-position: left bottom; opacity: 0.5}
#menu:hover .contact {background-position: left bottom; opacity: 0.5}
#menu:hover .about {background-position: left bottom; opacity: 0.5}

我将如何实现这一目标？提前感谢您的帮助！

Answer 1

ohnno，

您走在正确的轨道上，但由于特殊性要求，它无法正常工作。尝试走这条路：

#menu:hover a { background-position: left bottom; opacity:0.5; }

如果仍然无效，请尝试：

#menu:hover li a { background-position: left bottom; opacity:0.5; }

最后，您还可以对规则应用！important来强制执行规则。！important是CSS的一个特殊标志，它告诉浏览器“这会覆盖你想到的任何东西”（有点）。这是一个例子：

#menu:hover li a { background-position: left bottom !important; opacity:0.5; }

有关特异性的更多信息，请查看W3C上的this article。简而言之，特异性定义了在哪些时候使用哪种样式。应用元素样式按规则定义，对可能适用的每种样式具有最高特异性的样式。

FuzzicalLogic

Answer 2

left-bottom可能无法改变，因此您不会注意到更改。试试吧？

获取a：悬停以调整多个类/ ID

2 个答案: