如果父级没有悬停，Div 不会松开 hover state

Question

If you hover above the second, third or forth item the hidden text shows up on the left side.

If you move your cursor to the hidden text, the hidden text will hide again.

But i want that you can hover over the second item, move your cursor to the "hide" and eg click on it. Is this possible in CSS or JS?

The HTML:

 <div class="container">
    <div class="item">item
       <div class="hide">hide</div>
    </div>
   <div class="item">item <div class="hide">hide</div></div>
   <div class="item">item <div class="hide">hide</div></div>
   <div class="item">item <div class="hide">hide</div></div>
  </div>

The CSS:

.container {
  display: flex;
  position: relative;
}

.item {
  padding: 1px;
  cursor: pointer;
}

.hide {
    opacity: 0;
    position: absolute;
    left: 0;
}


.item:hover .hide {
  display: block;
  opacity: 1;
}

Here is my codepen

I tried to expand the width from the hide element, but that doesn't work

.hide {
    width: 100vw;
}

Is there a method to expand the hide elements width or something else, so the "hide" won't go away if the parent element isn't hovered?

Answer 1

Just tweaked some of the code for you so that the layout worked better. Main issue looks to be in the last line of CSS I've added where you target to see if the .hide has a hover state triggered.

 .container { display: flex; }.item { padding: 1px; cursor: pointer; float:left; width:100%; }.hide { opacity: 0; position: absolute; left: 0; width:100%; pointer-events:none; }.item:hover >.hide, .item >.hide:hover { display: block; opacity: 1; pointer-events:all; }

 <div class="container"> <div class="item">item <div class="hide">hide1</div> </div> <div class="item">item <div class="hide">hide2</div></div> <div class="item">item <div class="hide">hide3</div></div> <div class="item">item <div class="hide">hide4</div></div> </div>