Question

我不知道这是否可以用css或javascript解决。我有一系列用css构建的导航方块。悬停状态下的背景颜色会发生变化。

#nav1, #nav2, #nav3
{position: absolute; width:20px; height:20px;  margin-right:7px;}
#nav2 {left: 27px;}#nav3 {left: 54px;}

a.nav:link {color: #fff;background-color: #bfbfc9;}
a.nav:visited, a.nav:hover, a.nav:active {background-color: #979695;}

这些导航会在动态生成的页面中的div中包含方块。我使用了JQery函数showonlyone（thechosenone）来显示和隐藏显示和隐藏的页面部分。

function showonlyone(thechosenone) {
 $('div[class|="page"]').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
           $(this).show();
      }
      else {
           $(this).hide();
      }
 });

光标离开导航方块后，无论是悬停还是点击，背景颜色都会变回原来的状态。当显示当前页面时，我希望颜色保持与悬停状态相同的颜色。我做了详尽的搜索，但似乎没有任何效果。谢谢你的帮助。

Answer 1

<强> HTML：

<ul>
    <li><a class="nav" href="#"></a></li>
    <li><a class="nav" href="#"></a></li>
    <li><a class="nav" href="#"></a></li>
</ul>

<强> CSS：

a.nav:visited, a.nav:hover, a.nav:active, a.nav.active {background-color: #979695;}

<强>使用Javascript：

$('.nav').click(function(){
    // Call your "showonlyone" function
    $(this).addClass('active')
        .parent().siblings()
        .find('a').removeClass('active');
});

您可能需要根据HTML进行调整，但您明白了。

如果您需要更多帮助，请发布您的HTML。

Answer 2

将此添加到jQuery：

$(this).css('background-color', '#979695');

这实际上会改变您所使用的div的样式，而不是暂时更改：hover。

单击动态生成的页面上的其他链接后单击和关闭后如何在链接上维护悬停状态

2 个答案: