将鼠标悬停在子级上并更改父级背景颜色

Hover over child and change parent background color?

本文关键字：颜色 背景 鼠标 悬停      更新时间：2023-09-26

我有我的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>

当我将鼠标悬停在<a>标签上时，它应该会更改bot-bardiv 的颜色。我怎样才能做到这一点？

var botBar = $('#bot-bar');
botBar.find("a").hover(function(){
   botBar.css({backgroundColor: "red"});      // mouseenter event
}, function(){
   botBar.css({backgroundColor: "green"});    // mouseleave event
});

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

$('#bot-bar a').hover(function( ev ){
   $(this).closest("div").css({background: ev.type=="mouseenter"?"red":"green"});
});

获取当前悬停的元素背景：

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
});

jsBin 演示

相关文章：