将元素悬停在可能悬停的其他元素下方

Question

我的 CSS 有问题。我有一些由 javascript 生成的元素，当我将它们悬停时，我会显示另一个元素，但我不知道为什么，显示的新元素位于其他生成的元素下方...这是我关于这个问题的CSS：.hiddenTextjob    {        display:none;        background-color:#000;        color:#FFF;        width:170px;        z-index:2!important;        height:55px;    }    .ghost_for:hover > .hiddenTextjob    {        display: block;        background-color:#000;        color:#FFF;        width:170px;        margin-top:-55px;        z-index:1!important;    }    .ghost_for    {        border: 0;        position:absolute;        background-color:blue;        z-index:1!important;    }.hiddenTextjob低于ghost_for，但他必须高于...提前致谢[编辑] 这里有一个 jsfiddle 来说明： https://jsfiddle.net/95jtx2oL/当你将鼠标悬停在蓝色元素上时，黑色悬停在上方，有时他在下方，这让我很生气......

Answer 1

.ghost_for:hover {
    z-index: 2!important;
}

上面的代码足以解决问题^^ jdfiddle

问题是由于 HTML 的堆叠造成的。如果较低的元素位于同一索引上，则它们会较高。因此，如果您可以提高悬停元素的 z-index，它的子元素也会更高。

Answer 2

z-index你设置在这里看起来有点奇怪1。

.ghost_for:hover > .hiddenTextjob

{

    display: block;

    background-color:#000;

    color:#FFF;

    width:170px;

    margin-top:-55px;

    z-index:1!important;

}

的初始值2似乎是正确的。尝试z-index从上面的代码中删除或将其设置为2.

Answer 3

我不确定您的 HTML，但如果它适合您，请尝试以下操作：

.hiddenTextjob {

  display: none;

  background-color: #000;

  color: #fff;

  width: 170px;

  z-index: 2 !important;

  height: 55px;

}

.ghost_for:hover > .hiddenTextjob {

  display: block;

  background-color: #000;

  color: #fff;

  width: 170px;

  margin-top: -55px;

}

.ghost_for {

  border: 0;

  position: absolute;

  background-color: blue;

  z-index: -1;

}