将鼠标悬停在背景中并不适用于绝对位置

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