Question

如果我的div下面有另一个div，那么当光标位于其上时，基础div的{{1}}状态是否会被激活顶部hover？假设前div的{{1}}为5，其他div的{{1}}为1。

Answer 1

快速鞭打一下。

使用:hover的其他元素中的元素将起作用（即使在否定z-index上）。

元素外部带有否定z-index的元素将无效。

HTML：

<div class="box">
  <div class="inside">
  </div>
</div>
<br><br>
<div class="box">
</div>
<div class="outside"></div>

CSS：

.box{
  position:relative;
  height:250px;
  width:250px;
  opacity:.4;
  background:red;
}

.outside, .inside{
  background:blue;
  height:100px;
  width:100px;
  position:absolute;
  z-index:-5;
}

.outside{
  top:400px;
}

.inside:hover{
  opacity:0;
}

.outside:hover{
  opacity:0;
}

Answer 2

简短的回答是否定的。

以下面的代码为例：

HTML：

<div id="one">one</div>
<div id="two">two</div>

CSS：

div {
    position: absolute;
    height: 300px;
    width: 300px;
}
div:hover {
    background-color: yellow !important;
}
div#one {
    top: 0;
    left: 0;
    background-color: red;
    z-index: 10;
}
div#two {
    top: 150px;
    left: 150px;
    background-color: green;
    z-index: 1;
}

当div#one悬停在重叠区域时，悬停永远不会在div#two上激活。

http://jsfiddle.net/Yff7Q/

z-index会影响元素“悬停”吗？

2 个答案: