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

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