0

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

基本上我有一个导航菜单，它由几个翻转图像组成（正常状态“左上角”，悬停状态“左下角”，它们当前配置为通过 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.

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

我已经尝试了以下方法，但没有成功（不透明度子句完全符合我的要求，但由于某种原因，这似乎不适用于“背景位置”）：

#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}

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

4

2 回答 2

1

哦，

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

#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 上的这篇文章。简而言之，特异性定义了在什么时候使用哪些样式。应用元素样式逐条规则地由对可能应用的每个样式具有最高特异性的样式定义。

模糊逻辑

于 2011-10-20T07:05:34.010 回答
0

left-bottom可能没有足够的变化，所以你不会注意到变化。试试对不对？

于 2011-10-20T07:04:38.863 回答