Javascript 将鼠标悬停在子对象上并更改父对象背景颜色？

我有我的html代码：

<div id="bot-bar">
    <nav class="main-nav" id="main">
        <a id="home" href="/">Home</a>
        <a id="events" href="events.php">Events</a>
        <a id="news" href="news.php">News</a>
        <a id="ranks" href="ranks.php">Ranks</a>
        <a id="media" href="media.php">Media</a>
    </nav>
</div>

当我将鼠标悬停在

标记上时，它应该会更改

机器人栏的颜色。我如何才能做到这一点

var botBar = $('#bot-bar');

botBar.find("a").hover(function(){
   botBar.css({backgroundColor: "red"});      // mouseenter event
}, function(){
   botBar.css({backgroundColor: "green"});    // mouseleave event
});

或稍短（性能较差，但显示出一些可能性）：

要获取当前悬停的元素背景，请执行以下操作：

var botBar = $('#bot-bar');
var botBarBg = botBar.css("background-color");

botBar.find("a").hover(function(){
   var bg = $(this).css("background-color");
   botBar.css({backgroundColor: bg});      // mouseenter event
}, function(){
   botBar.css({backgroundColor: botBarBg});    // mouseleave event
});


或稍短（性能较差，但显示出一些可能性）：

要获取当前悬停的元素背景，请执行以下操作：

var botBar = $('#bot-bar');
var botBarBg = botBar.css("background-color");

botBar.find("a").hover(function(){
   var bg = $(this).css("background-color");
   botBar.css({backgroundColor: bg});      // mouseenter event
}, function(){
   botBar.css({backgroundColor: botBarBg});    // mouseleave event
});

如何将
#bot bar
的背景色设置为
a
标记的背景色？较短的版本不是性能方面的最佳实践，因为它每次都必须找到最接近的div。@Vitox。事实上，使用jQ根本没有什么效果（但它是一个非常棒的时间救星！）@RokoC.Buljan虽然我同意jQ固有的性能缺陷，但我尽量将其影响降至最低。我认为这永远不可能完全不使用jQ，但在这种特殊情况下，我真的不喜欢每次都触发一个循环，一个事件发生。。。您的其他方法是完美的，但是最小化版本是您真正应该避免的（或者在其他编程人员甚至看不到性能问题的情况下，我们可以，不应该建议这样的方法）。数学上是（jQ退税）*（（计数）*其事件）。@Vitox事件将在jQuery的
选择器
或
Sizzle
函数内分配，该函数循环所有选择器元素。没什么好担心的。毕竟，多个元素上的事件就是这样工作的；在解析（+ready）时间分配（在本例中）。唯一关心的是找到我的父母！，但这只会发生在鼠标悬停时，当UI操作发生时，同样没有什么好担心的。你的建议很好，但你的数学有点夸张：）我如何将
#bot bar
的背景色设置为
a
标记的背景色？较短的版本不是关于性能的最佳实践，因为它每次都必须找到最接近的div。@Vitox。事实上，使用jQ根本没有什么效果（但它是一个非常棒的时间救星！）@RokoC.Buljan虽然我同意jQ固有的性能缺陷，但我尽量将其影响降至最低。我认为这永远不可能完全不使用jQ，但在这种特殊情况下，我真的不喜欢每次都触发一个循环，一个事件发生。。。您的其他方法是完美的，但是最小化版本是您真正应该避免的（或者在其他编程人员甚至看不到性能问题的情况下，我们可以，不应该建议这样的方法）。数学上是（jQ退税）*（（计数）*其事件）。@Vitox事件将在jQuery的
选择器
或
Sizzle
函数内分配，该函数循环所有选择器元素。没什么好担心的。毕竟，多个元素上的事件就是这样工作的；在解析（+ready）时间分配（在本例中）。唯一关心的是找到我的父母！，但这只会发生在鼠标悬停时，当UI操作发生时，同样没有什么好担心的。你的建议很好，但你的数学有点夸张：）