我有一个导航菜单,我正在尝试做两件事。当我将鼠标悬停在 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');
}
这是一个包含大部分代码 http://jsfiddle.net/aHSmy/1/的 JSFiddle
在 css 中定义一个活动类,然后使用 Jquery 应用和删除它
$(function() {
$("li").click(function() {
// remove classes from all
$("li").removeClass("active");
// add class to the one we clicked
$(this).addClass("active");
});
});
代码笔示例
你必须更准确地定位你的 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 脚本。