Question

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

另外，我使用了一个导航，我用postion显示：绝对在容器上。每次我将鼠标悬停在导航上时，背景更改都无法正常工作，因为我并未在后台处理容器。

有没有解决办法？

我的代码（将鼠标悬停在1上）：

＆＃13;

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

＆＃13;

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

＆＃13;

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

悬停在背景中并不会使用绝对位置

2 个答案: