Question

我在div中有div，如下所示

<div id="locations">
    <div id="h-dragbar"></div>
</div>

和css如下

#locations {
    height: 50px;
    width: 100%;
    position: relative;
    z-index: -1;
}

#h-dragbar{
   background-color:black;
   width:100%;
   height: 3px;
   position: absolute;
   cursor: row-resize;
   bottom: 0;       
   z-index: 999;
}

#h-dragbar:hover{
   background-color:blue;
}

但将鼠标悬停在ID为 h-dragbar 的div上无效。您可以在此处demo测试代码。

我做错了什么？提前谢谢。

Answer 1

在您提供的新示例jsFiddle中，您将z-index -1 #locations设置为父级div #h-dragbar，这就是为什么您需要＆＃39} ;无法在其子div上执行悬停功能，即z-index。您需要删除#locations上的否定z-index，然后才能正常工作。

更新

我已经检查了您的最新小提琴而不是#locations使用#v-dragbar为z-index，以优先#v-dragbar，您可以通过使用高优先级来实现同样的目标z-index: 9999的{{1}}，例如例如z-index，以及#locations相对较小的z-index: 9998，例如body { width: 100%; height: 500px; } #wrapper { width: 100%; height: 100%; } #explorer { width: 13%; min-height: 100%; height: 100%; position: relative; float: left; } #v-dragbar { background-color: black; height: 100%; float: right; width: 2px; cursor: col-resize; z-index: 9999; position: relative; } #h-dragbar { background-color: black; width: 100%; height: 2px; cursor: row-resize; position: absolute; bottom: 0; z-index: 999; } #h-dragbar:hover { background-color: blue; } #v-dragbar:hover { background-color: blue; } #locations { height: 50%; width: 100%; position: relative; z-index: 9998; /*imp*/ }。它会以这种方式完美地运作。这是一个演示：

＆＃13;

<div id="wrapper">
  <div id="explorer">
    <div id="v-dragbar"></div>
    <span style="clear: both;"></span>
    <div id="locations">
      <div id="h-dragbar"></div>
    </div>
    <div id="datapoints">
    </div>
  </div>
  <div id="explorer">
  </div>
</div>

＆＃13;

{{1}}

＆＃13;

Answer 2

由于负z-index而无法正常工作 - 你基本上将整个事物放在body元素后面，使其不可挽回，不可点击等等。如果没有更多的上下文，我们无法进一步帮助，但是为了实现这一点，你需要改变策略。

Answer 3

你的例子很好......

但是，请尝试：

#h-dragbar:hover{
   background-color:blue !important;
}

如果它现在有效，对你来说，这意味着其他一些CSS实例具有优先权。

Answer 4

如果您无法积极z-index，请创建z-index: 0;并进行检查。它有效：

＆＃13;

#locations {
  height: 50px;
  width: 100%;
  position: relative;
  z-index: 0;
}

#h-dragbar{
  background-color:black;
  width:100%;
  height: 3px;
  position: absolute;
  cursor: row-resize;
  bottom: 0;  		
  z-index: 999;
}

#h-dragbar:hover{
  background-color:blue;
}

＆＃13;

<div id="locations">
  <div id="h-dragbar"></div>
</div>

＆＃13;

悬停不适用于子元素

4 个答案: