リンク上にマウスカーソルを置いたときの親要素または祖先要素の色の変更

Question

私は、ナビゲーションバーの子供またはその子孫であるリンク上にカーソルを置いたときに、ナビゲーションバー全体の色を変更したいウェブサイトで作業しています。

.containernav { 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: grey; 
 
} 
 
/*home*/ 
 
#home { 
 
    color: white; 
 
} 
 
#home:hover { 
 
    background-color: white; 
 
} 
 

 

 

 
/*playstation*/ 
 
#playstation { 
 
    color: white; 
 
} 
 
#playstation:hover{ 
 
    background-color: blue; 
 
} 
 

 

 

 
/*xbox*/ 
 
#xbox { 
 
    color: white; 
 
} 
 
#xbox:hover{ 
 
    background-color: green; 
 
} 
 

 

 

 
/*pcgaming*/ 
 
#pcgaming { 
 
    color: white; 
 
} 
 
#pcgaming:hover { 
 
    background-color: #FFBA00; 
 
} 
 

 

 

 

 
nav > ul { 
 
    list-style: none; 
 
} 
 

 
nav > ul > li > a { 
 
    text-decoration: none; 
 
}

<div class="containernav" id="a"> 
 
    <nav> 
 
     <ul> 
 
     <li><a id="home" href="index.html">Home</a></li> 
 
     <li><a id="playstation" href="playstation.html">Playstation</a></li> 
 
     <li><a id="xbox" href="xbox.html">XBox</a></li> 
 
     <li><a id="pcgaming" href="pcgaming.html">PC-Gaming</a></li> 
 
     </ul> 
 
    </nav> 
 
</div>

私の現在の実装では、唯一のリンク、それ自己の色を変更しますが、CSSスタイルクラスcontainernavでないコンテナ。コンテナの背景色を変更するために変更する必要があるものは何ですか？

Answer 1

これはCSSでは達成できません。この問題に関するいくつかの話題があります。その中には、親セレクタが必要なものもあります。その中には、パフォーマンス上の大きな問題となるものがあります。 これはあなたのためのオプションである場合、javascriptでこれを行うことができます。ここ はjQueryを使って簡単な例です：

$("#child").hover(function(){ 
    $(this).parent().css("bakground,"red"); 
    //This should be ajusted according your needs 
    // Can be achieved with data attribute, custom class etc.. 
}); 

Answer 2

jQueryの

$(document).ready(function() { 

    $("#home").hover(
    function() { 
     $(".containernav").addClass("white-bg"); 
    }, function() { 
     $(".containernav").removeClass("white-bg"); 
    } 
); 

    $("#playstation").hover(
    function() { 
     $(".containernav").addClass("blue-bg"); 
    }, function() { 
     $(".containernav").removeClass("blue-bg"); 
    } 
); 

// and so on.. 

}); 

CSS

.white-bg {background-color:white;} 
.blue-bg {background-color:blue;} 

// and so on