[英]Hover over child and change parent background color?
我有我的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-bar
div的顏色。 我該怎么做?
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
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.