Div doesn't loose hover state if parent isn't hovered

Liskari 0
Viewed 48

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 e.g. 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?

visible javascript css html
1 Answers

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>

Unbranded Manchester0
Related