CSS图像导航栏-希望Javascript单击以保留悬停图像

因此，我使用图像制作了一个导航栏，当我将鼠标悬停在图像上方时，图像的顶部会出现一个红色的栏。我希望在用户单击时保留此红色条，以便他们可以查看当前所在的页面。我知道我需要Javascript来实现这个功能和click函数，也许还需要给它一个活动类，但我不知道如何完成其余的工作。e、 g.用于.active状态的CSS，因为条上的每个li的大小不同。。这可能吗

HTML:

JAVASCRIPT？：

$("#nav-example a").on('click', function () {
            $("#nav-example a").removeClass('active');
            $(this).addClass('active');
        });

---

任何帮助都将不胜感激

您的

：hover

事件是否有效？是否有一个我们可以玩的演示？使用PlaceKitten或Lorem Pizza之类的东西，您也可以获得图像。根据观察，活动类似乎没有被正确删除？您到底有什么问题？我的：悬停事件正在工作，我现在已修复！：我花了几个小时，但我想明白了。当你最终破解密码时，总是感觉很好：P谢谢你的回复：）

#nav-example {
    background:url("nav2.jpg") no-repeat;
    width: 1000px;
    height: 47px;
    margin: 0;
    padding: 0;
}

#nav-example li, #nav-example a {
    height: 47px;
    display: block;
}

#nav-example li {
    float: left;
    list-style: none;
    display: inline;
    text-indent: -9999em;
}

#nav-example-01 { width: 70.5px; }
#nav-example-02 { width: 178.5px; }
#nav-example-03 { width: 100.5px; }
#nav-example-04 { width: 185.5px; }
#nav-example-05 { width: 135px; }
#nav-example-06 { width: 92px; }
#nav-example-07 { width: 67.5px; }
#nav-example-08 { width: 170.5px; }

#nav-example-01 a:hover { background:url("nav2.jpg") 0px -47px no-repeat; }
#nav-example-02 a:hover { background:url("nav2.jpg") -70.5px -47px no-repeat; }
#nav-example-03 a:hover { background:url("nav2.jpg") -248.5px -47px no-repeat; }
#nav-example-04 a:hover { background:url("nav2.jpg") -349px -47px no-repeat; }
#nav-example-05 a:hover { background:url("nav2.jpg") -534.5px -47px no-repeat; }
#nav-example-06 a:hover { background:url("nav2.jpg") -669.5px -47px no-repeat; }
#nav-example-07 a:hover { background:url("nav2.jpg") -761.5px -47px no-repeat; }
#nav-example-08 a:hover { background:url("nav2.jpg") -829px -47px no-repeat; }

$("#nav-example a").on('click', function () {
            $("#nav-example a").removeClass('active');
            $(this).addClass('active');
        });