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

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

3 个答案: