Jquery 将鼠标光标悬停在多个元素上，父元素保持其新的背景色

我对JQuery相当陌生，我想知道如何将鼠标放在具有子类别子类别的主类别Cat上，并使主类别显示不同的背景色，即使将鼠标光标放在子类别上，直到仅选择另一个主类别Cat

谢谢你的帮助

HTML

---

既然可以使用CSS，为什么还要使用jQuery

例如：

 ol>li a{background:#DDD;} //define the original bg color for the parent
 ol>li ul{display:none;} //hide your subs
 ol>li:hover a{background:#CCC;} //your parent category changes color
 ol>li:hover ul{display:block;background:red;} //your subcategories are shown

我忘了在这里发帖的人是如何喜欢让别人为他们写完整的代码的。不幸的是我不能，但这应该让你走上正轨：

---

这实际上不起作用，谢谢你的帮助。是的，也许你做错了。你为什么不摆好一把小提琴，我会给你看所有的类别都保持相同的颜色，即使在悬停状态下。当鼠标悬停在它的子类别上时，主类别应该改变为不同的颜色，就像我说的，子类别应该是不同的颜色，然后主类别一个简单的剪掉就可以了，我没有JSFIDLE帐户。然后在CSS:ol>li:hover ul{display:block；}中添加颜色。你知道如何使用CSS吗？

    $(document).ready(function(){
        $('#cat li a:parent').hover(
        );
    });

 ol>li a{background:#DDD;} //define the original bg color for the parent
 ol>li ul{display:none;} //hide your subs
 ol>li:hover a{background:#CCC;} //your parent category changes color
 ol>li:hover ul{display:block;background:red;} //your subcategories are shown