Html CSS：更改div'；另一个div上的属性'；s a:悬停。可能的怎么用？

请参阅此项。
我想做的是在

#菜单ul li

内的

a

-tag上悬停，

标题底部的
背景色
也必须改变，就像
a
-tag的
背景色
一样。
我怎样才能做到这一点

更新

仅使用CSS完成此操作（yippie！）
 这里有一个jQuery方法（很抱歉，为了让这个javascript只适合我而付出了太多的努力）。但它可以被翻译


或者使用jQuery UI动画样式转换


我不是一个Javascript忍者，但我认为您正在寻找的是使用
onmouseover（）
更改样式属性。您将无法使用css和当前结构来实现这一点。没有办法将子元素链接到DOM以影响父元素（因此是
CSS
的
cascading
部分）？有什么办法吗？如果你能让
标题底部
成为
li
或
a
标签的兄弟，那么我认为可以解决一些问题。Javascript可以很容易地解决这个问题，这正是我要做的。@Asif-是的，尝试转储列表并改用内联块div。将
标题底部
作为最后一个子项。然后，您可以让一个悬停事件以这两个元素为目标
#menu div:hover，#menu div:hover+#header bottom{background:black；}
谢谢@mrtsherman！还有一件事，鼠标退出时，
#标题底部
wikk的颜色必须更改为当前

菜单项的颜色，比如说，如果我在

产品

页面上，默认颜色应该是产品边框的颜色，在鼠标输入时，最后在鼠标退出时，颜色应该更改为相应菜单项的边框颜色，颜色应恢复为默认当前菜单项的。我希望我很清楚..在当前链接中添加一个

active

类。然后在鼠标外恢复颜色。

$('.menu').hover(

function() {
    var color = $(this).css('borderLeftColor');
    console.log(color);
    $('#header-bottom').css('backgroundColor', color);
}, function() {

});​

$('.menu').hover(

function() {
    var color = $(this).css('borderLeftColor');
    console.log(color);
    $('#header-bottom').stop().animate({ backgroundColor: color }, 500);
}, function() {

});​