如何在部分处于活动状态时禁用css精灵导航栏悬停状态？

Question

我一直在开发一个使用css精灵导航栏的网站。

已经设置为活动的一个部分的css如下所示。

ul#navigation li#navigation-1 a
{
background:url(images/btn_navbar.png) no-repeat -1px 0;
width:90px;
}

ul#navigation li#navigation-1 a.current
{
background-position:-1px -90px;
}

ul#navigation li#navigation-1 a:active,ul#navigation li#navigation-1 a:hover
{
background-position:-1px -45px;
}

我使用以下HTML/PHP设置了其他部分的活动状态

<li id="navigation-8"><a href="<?php $page = get_page_by_title('Contact'); echo get_permalink ($page ->ID); ?>" title="CONTACT" <?php if ( is_page('Contact')) { echo 'class="current"' ; } ?>><span>CONTACT</span></a></li>

问题是，当前的“活动”部分仍然有:hover属性，这会导致活动状态的闪烁和不必要的移除，直到鼠标离开该部分。

理想情况下，我想简单地删除当前选定部分的悬停属性。

这怎麽可能？我可以做一些jquery魔法吗？

非常感谢。

罗伯特

Answer 1

您可以为“当前”链接指定psuedo类：

#navigation-1 a.current,
#navigation-1 a.current:hover,
#navigation-1 a.current:active {
    background-position:-1px -45px;
}

我还建议您将这些样式放在其他#navigation-1 a样式的下面，因为它们将覆盖它们从这些样式继承的样式。

我想指出的是，没有必要编写一个具有2个ids的选择器。Ids总是唯一的，所以甚至不需要指定一个元素，因为永远不会有两个元素(使用有效的和 html)。

这些都是相同的(假设您的标记保持不变，并且没有未使用的css)：

ul#navigation li#navigation-1{}
#navigation li#navigation-1{}
#navigation-1{}

Answer 2

也可以通过以下方式给非当前链接一个类：

if ( is_page('Contact'))
    { echo 'class="current"' ; }
else
    { echo 'class="notcurrent"' ;}

然后将您的css更改为：

ul#navigation li#navigation-1 a.notcurrent:active,
ul#navigation li#navigation-1 a.notcurrent:hover
{
    background-position:-1px -45px;
}