將鼠標懸停在背景中並不適用於絕對位置

Question

我有一個使用懸停狀態的容器。每當我將鼠標懸停在上面時，背景都會變爲不同的顏色。

另外我使用了一個導航，我用postion顯示：絕對在容器上。每次我將鼠標懸停在導航上時，背景更改都不起作用，因爲我沒有在後臺掃描容器。

有沒有解決方法？

我的代碼（懸停在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; 
}