Html 悬停在子元素上不起作用

我有一个div里面的div，如下所示

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

但将鼠标悬停在id为h的div上，dragbar不工作。您可以在这里测试代码

---

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

您的示例效果很好

但是，请尝试：

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

---

如果现在它能工作，对你来说，这意味着其他CSS实例有优先权。

它不能工作，因为负z索引-你基本上把整个东西放在body元素后面，使它不可悬停，不可点击，等等。如果没有更多的上下文，我们无法进一步帮助，但是您需要稍微改变一下策略，这样才能起作用。

在您提供的新示例JSFIDLE中，您将

-1

的

z-index设置为父div，即
\locations
，这就是您无法对其子div执行悬停函数的原因，即
\h-dragbar
。您需要删除
#位置
上的负
z索引
，然后它就可以正常工作了

更新：

我已经检查了你最新的小提琴，为了优先使用
#v-dragbar
，你可以对
#v-dragbar
，而不是对
#位置使用负的
z-index
，例如
z-index:9999
，使用高的
z-index
，对于
#位置
，相对较小的
z-index
，例如
z-index:9998
。这样会很好地工作。下面是一个演示：


正文{
宽度：100%；
高度：500px；
}
#包装纸{
宽度：100%；
身高：100%；
}
#探险家{
宽度：13%；
最小高度：100%；
身高：100%；
位置：相对位置；
浮动：左；
}
#德拉巴{
背景色：黑色；
身高：100%；
浮动：对；
宽度：2倍；
光标：col resize；
z指数：9999；
位置：相对位置；
}
#德拉巴{
背景色：黑色；
宽度：100%；
高度：2倍；
光标：调整行大小；
位置：绝对位置；
底部：0；
z指数：999；
}
#h-德拉巴：悬停{
背景颜色：蓝色；
}
#v-dragbar:悬停{
背景颜色：蓝色；
}
#地点{
身高：50%；
宽度：100%；
位置：相对位置；
z指数：9998；
/*小鬼*/
}
如果您不能创建一个正的
z-index
，请创建一个
z-index:0并检查。它的工作原理是：


#位置{
高度：50px；
宽度：100%；
位置：相对位置；
z指数：0；
}
#德拉巴{
背景色：黑色；
宽度：100%；
高度：3倍；
位置：绝对位置；
光标：调整行大小；
底部：0；
z指数：999；
}
#h-德拉巴：悬停{
背景颜色：蓝色；
}

JSFIDLE非常适合我。你的浏览器是什么？很好，你只有3倍的悬停区域，尽管容器元素上有一个负的zindex，你期望什么，右键单击并检查…向我们展示所有相关的代码。这不应该被否决-Carles提供了一个测试来帮助OP确定是否存在特定性问题：“如果现在它工作了，对你来说，这意味着其他CSS实例具有优先权。”这样的特定ID不太可能失去优先权。不过，它可能在样式表的后面被覆盖。这个“答案”取决于对问题中没有出现的代码的一些非常严重的猜测。事实上，现在我已经查看了演示，似乎回答者没有（查看演示）。@ShawnErquhart我根据上一个链接回答；-）我需要z-index为-1用于其他用途。@Sanky其他用途是什么？请检查此项，它可以根据您的需要完美工作：@sanky@Sanky伟大的我也更新了我的答案，上面有一个解释，你可以阅读。你可以把我的答案标记为正确，因为它解决了你的问题。非常感谢。
#h-dragbar:hover{
   background-color:blue !important;
}