html - CSS事件分区背景颜色变化

Question

我还在学习中，所以请多多包涵。

请先查看此页面:My site

稍微滚动一下并检查名称为 NAVIGATE 的边栏。
如您所见，我在那里手动添加了几个子菜单，并且在悬停在每个分区上时添加了背景颜色变化。
现在我想让它像在 CSE 历史页面上一样，导航列的子选项应该显示事件部门或事件链接。

意味着我想要那里的 :active 属性。事件页面的部分将显示不同的背景颜色，比如绿色。

我尝试了很多搜索，但没有得到这个想法。

非常感谢!

PS:我想做的是这个，我是一个新手，所以不知道该怎么做:

div.sbproduct:hover{
    background-color: #F5AC2B;
}

div.sbproduct a:active{
    background-color:#ffffff;
}

.sbproduct:hover a{
    color: #ffffff !important;
}

Answer 1

我认为这可能会帮助你......使用一个 toggle() 来改变事件部门的背景颜色

工作 Fiddle

// It changes the active  division background color
$( ".sbproduct" ).toggle(
function() {
 $( this ).addClass( "change" );
 },
 function() {
  $( this ).removeClass( "change" );
 }
);