悬停在背景中不适用于绝对位置

Question

我有一个使用悬停状态的容器。每次我将鼠标悬停在它上面时，背景都会更改为不同的颜色。

此外，我还使用了一个导航，该导航在容器上显示为 position: absolute。每次我将鼠标悬停在导航上时，背景更改不起作用，因为我没有在后台的容器上。

有什么解决方法吗？

我的代码（悬停在 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>

Fiddle: https://jsfiddle.net/3h1orsmu/1/

Answer 2

使用包装器的悬停状态，但以容器为目标：

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

悬停在背景中不适用于绝对位置

Hover in background doesn't work with position absolute over it

html

css

css-position

absolute

hover