0

我有一个导航菜单，我正在尝试做两件事。当我悬停 1 个列表项时，我试图突出显示该单个项目，如果我单击单个项目，我会尝试应用某种颜色或样式，表明该项目当前处于焦点或积极的。如果我选择另一个，当前项目将停用，新选择的项目将变为活动状态。

这是我尝试过的 CSS，但现在只要我悬停任何列表项，所有项目都会被突出显示，而不仅仅是一个：

#listContainer{

      margin-top:15px;
    }

#expList ul, li {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;    
}
#expList p {
    margin:0;
    display:block;
}
#expList p:hover {
    background-color:#121212;
}
#expList li {
    line-height:140%;
    text-indent:0px;
    background-position: 1px 555555px;
    padding-left: 20px;
    background-repeat: no-repeat;
    margin-bottom: 5px;
}
#expList ul{
    margin-top: 5px;
}
#expList li:hover{
    background-color: #eee; This is where the problem is
}

/* Collapsed state for list element */
#expList .collapsed {
    background-image: url('https://hosted.compulite.ca/kc/MD/SiteAssets/collapsed.png');
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
    background-image: url('https://hosted.compulite.ca/kc/MD/SiteAssets/expanded.png');
}

这是一个包含大部分代码的 JSFiddle http://jsfiddle.net/aHSmy/1/

4

2 回答 2

1

在您的 css 中定义一个活动类，然后使用 Jquery 应用和删除它

$(function() {
   $("li").click(function() {
      // remove classes from all
      $("li").removeClass("active");
      // add class to the one we clicked
      $(this).addClass("active");
   });
});

代码笔示例

于 2013-10-20T20:33:43.787 回答
1

您必须更准确地定位您的 li 项目。由于您的 html 结构是“ul -> li -> ul -> li with links”并且您的 css 仅针对包含所有链接的第一个 li，因此它们当然都会在悬停时应用样式。更正确的 css 目标是：

#expList ul li:hover{
    background-color: #eee;
}

如果您想定位活动/焦点状态，则必须使用 css 伪类选择器，如:active. （在此处阅读有关它们的更多信息：css-tricks.com/pseudo-class-selectors），或者如果您想在用户继续使用当前页面时长期使用它们，请使用Paulie_d给您的 jQuery 脚本。

于 2013-10-21T11:32:05.407 回答