我如何禁用我的css精灵导航条悬停状态的部分，而它是活跃的 - How can I disable my css sprite nav bars hover state for a section while it is active?

How can I disable my css sprite nav bars hover state for a section while it is active?

我一直在开发一个网站，利用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吗?

许多谢谢。

罗伯特

您可以为"current"链接指定psuedo类:

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

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

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

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

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

给非当前链接也一个类:

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