我有一个导航菜单,我正在尝试做两件事。当我将鼠标悬停在 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/
最佳答案
在你的css中定义一个active类,然后使用Jquery来应用和移除它
$(function() {
$("li").click(function() {
// remove classes from all
$("li").removeClass("active");
// add class to the one we clicked
$(this).addClass("active");
});
});
关于html - 在包含许多元素的列表菜单中突出显示单个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19482386/