バックグラウンドでのホバーは絶対位置では機能しません

Question

私はホバー状態を使用するコンテナを持っています。 その上にカーソルを置くたびに、背景が別の色に変わります。

さらに、私はポップオンで表示するナビゲーションを使用しています：絶対的なコンテナです。ナビゲーション上にカーソルを置くたびに、バックグラウンドでコンテナに乗っていないので、バックグラウンドの変更は機能しません。

対応策はありますか？

私のコード（1オーバーホバー）：

.wrapper {position: relative;} 
 
.container {background: red; width: 100%; height:200px;} 
 
.container:hover {background: blue;} 
 
.nav {position:absolute; top:50%;margin: 0 auto; width:100%; text-align:center;}

<div class="wrapper"> 
 
    <div class="container"> 
 
    
 
    </div> 
 
    <div class="nav"> 
 
    <a href="#">1</a> 
 
    </div> 
 
</div>

Answer 1

は、容器内のナビゲーションバーを移動します：

<div class="wrapper"> 
    <div class="container"> 
     <div class="nav"> 
      <a href="#">1</a> 
     </div> 
    </div> 
</div> 

それはとても内部position: absoluteをだか、外ではありません問題。

---

またはJavaScriptを使用します。

<div class="wrapper"> 
    <div class="container" onmouseover="change()" onmouseout="changeBack()"> 

    </div> 
    <div class="nav" onmouseover="change()"> 
     <a href="#">1</a> 
    </div> 
</div> 

<script> 
    window.change = function() { 
     console.log("hello"); 
     document.getElementsByClassName("container")[1].style.background = "blue"; 
    } 

    window.changeBack = function() { 
     console.log("hello"); 
     document.getElementsByClassName("container")[1].style.background = "red"; 
    } 
</script> 

フィドル：https://jsfiddle.net/3h1orsmu/1/

Answer 2

は、ラッパーのホバー状態を使用しますが、コンテナをターゲット：

.wrapper:hover .container{ 
    background-color:blue; 
}