Issue
Sometimes I have a bunch of elements to which I would like to add some info box when I hover over them. I've tried to add absolute positioned overlay to capture hover events and it works but I lose all events for elements behind overlay. To solve this I've tried pointer-events: none;
but now the tooltip is not being displayed on hover.
.parent {
position: relative;
width : fit-content; /* Edit0, parent could be smaller than hover-box */
}
.hover-box {
width: 100vw;
height: 100%;
background: red;
opacity: 0.2;
position: absolute;
top: 0;
/* click will work, but not hover */
/* pointer-events: none; */
}
.info {
display: none;
}
.hover-box:hover+.info {
display: inline;
}
<div class="parent">
<button>btn0</button>
<button>btn1</button>
<div class="hover-box"></div>
<button class="info">info</button>
</div>
Edit0 : Added fit-content to show the problem better. Parent could be smaller.
Edit1 : Maybe there is some way to have events on hover-box and buttons at the same time?
Solution
I've set the z-index of the buttons to 2
, which places them above the overlay and allows them to be clicked.
.parent {
position: relative;
display: inline-flex;
align-items: center;
flex-wrap: nowrap;
}
.hover-box {
width: 100vw;
height: 100%;
background: red;
opacity: 0.2;
position: absolute;
top: 0;
left: 0;
}
.info {
display: none;
position: relative;
}
.parent:hover .info {
display: inline-block;
}
button {
margin: 2px;
z-index: 2;
}
<div class="parent">
<div class="hover-box"></div>
<button>btn0</button>
<button>btn1</button>
<button class="info">info</button>
</div>
Answered By - Jacob
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.