Javascript 菜单管理悬停并单击事件

我有一个菜单，我想添加悬停和点击事件

$('a').hover(function(){
    $(this).css('background', 'red');
}, function(){
    $(this).css('background', '');
});

$('a').click(function(){
    $(this).css('background', 'green');
});

以下是演示：

---

如何阻止悬停事件覆盖单击事件？i、 e.如果我已经单击了某个元素，则不应为该单击的元素触发悬停事件。

使用CSS规则并切换类

$（“a”）。在（“单击”）上，函数（e）{
e、 预防默认值（）；
$（此）.toggleClass（“活动”）；
})

a.active，a.active：悬停{
背景颜色：绿色；
}
a:悬停{
背景色：红色；
}

---

单击元素时切换CSS类。悬停时，仅当元素没有特定类时才更改背景

$（'a'）。悬停（函数（）{
！$（this.hasClass（'clicked'）&&$（this.css（'background'，'red'）；
}，函数（）{
！$（this.hasClass（'clicked'）&&$（this.css（'background'，''）；
});
$（'a'）。单击（函数（）{
$（this.css（'background'，'green'）.toggleClass（'clicked'）；
});





只使用css类……不幸的是，不允许创建css文件，只能使用jQuery