hover element below other element possibly hovered

Question

I have a problem with my css. i have some element generated by javascript and when i hover them i display another element but i don't know why, the new element displayed is below the others generated element...

this is my css about this problem:

.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 is below ghost_for but he must be above... Thanks by advance

[EDIT] here a jsfiddle to illustrate: https://jsfiddle.net/95jtx2oL/

when you hover a blue element sometine the black hover is above sometime he is below that make me mad...

Answer 1

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

The above code is enough to fix the issue ^^ jdfiddle

The issue was because of the stacking of HTML. The lower elements will be higher if they are on the same index. So if you can raise the z-index of the hovered element, it's child element will be higher as well.

Answer 2

It looks a bit strange that you set z-index to 1 here.

.ghost_for:hover > .hiddenTextjob
{
    display: block;
    background-color:#000;
    color:#FFF;
    width:170px;
    margin-top:-55px;
    z-index:1!important;
}

The initial value of 2 seems correct. Try to remove z-index from the above code or set it to 2 .

Answer 3

I am unsure of your HTML but try this if it works for you:

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