主导航在页面加载时采用悬停样式

Question

我正在制作一个水平导航菜单。我对这个菜单还有一个问题。当用户导航到页面时，我希望主 li 保持悬停。现在，li 不再保持悬停状态，而是恢复为默认状态。我是否需要给身体上一堂课才能使其发挥作用，还是有其他方法？代码片段可以在这里找到： http://jsfiddle.net/SeasonEnds/LSmfN/

理想情况下， “阅读”选项卡应在加载页面时采用悬停样式，但当用户将鼠标悬停在其他主要导航链接上时消失。

Answer 1

当用户将鼠标悬停在另一个顶级链接上时，活动元素上的突出显示不应该真正消失，因为这不利于可用性 - 如果用户不单击链接，那么他们就失去了他们在哪里的视觉线索在您的网站上。

我稍微修改了 css：

ul#topnav li.on a    {color:#828282; background: #f3f3f3; }
ul#topnav li a:hover {background: #f3f3f3; color:#828282;}
ul#topnav li a:visited {color:#828282; }

我还添加了一些 jQuery，以在将鼠标悬停在子项上时保持活动顶级链接的颜色：

$("li a").hover(function(){
    $(this).parent().prev().toggleClass("top-level-highlight");
});

更新了小提琴：
http://jsfiddle.net/LSmfN/14/

Answer 2

如果服务器没有设置活动菜单元素，或者没有 JS 指示活动元素，菜单就无法知道它位于哪个页面。

您可以执行以下操作 - 在“此处”添加一个类来指示当前位置：

ul#topnav li:hover, ul#topnav li.here {background: #f3f3f3;

使用 js 检测当前页面：

//var here = document.location+"" //for production
var here = "/home.html" //for testing  
 if(here.indexOf("home.html")>-1) {

     $('ul#topnav li').eq(0).addClass('here')
     $('ul#topnav li').mouseout(function() {
          $('ul#topnav li').removeClass('here')
     })
 } //repeat for all pages