I have a speech bubble that pops up when hovering over a div. However, when this hover action is executed it moves the div under it. How can I prevent this from happening?
Expected result: Hover will not move div under it and will overlap div under it if necessary.
Here is my code so far. Any help would be appreciated, thanks.
#container {
background: white;
left: 97px;
border-radius: 5px;
min-width: 180px;
min-height: 100px;
position: absolute;
z-index: 999;
font-size: 14px;
}
#item {
position: relative;
padding: 12px 15px 12px 30px;
display: flex;
justify-content: space-between;
}
#plus:hover {
position: relative;
background-color: grey;
margin: 0 auto;
width: 75%;
text-align:center;
padding: 7px;
font-size: 15px;
color: white;
border-radius: 5px;
z-index:1;
}
#plus:after {
content:'';
position: absolute;
display:block;
top: -20px;
margin-left: -5%;
bottom: 80%;
left: 50%;
border: .75rem solid transparent;
border-top: none;
z-index:1;
border-bottom-color: grey;
} <div id="container">
<div id="item">Line 1</div>
<div id="plus"></div>
<div id="item">Line 2</div>
</div>#container {
background: white;
left: 97px;
border-radius: 5px;
min-width: 180px;
min-height: 100px;
position: absolute;
z-index: 999;
font-size: 14px;
}
#item {
position: relative;
padding: 12px 15px 12px 30px;
display: flex;
justify-content: space-between;
}
#plus:hover {
position: absolute;
background-color: grey;
margin: 0 auto;
width: 75%;
left:2vw;
top:6.5vh;
text-align:center;
padding: 7px;
font-size: 15px;
color: white;
border-radius: 5px;
z-index:1;
}
#plus:after {
content:'';
position: absolute;
display:block;
top: -20px;
margin-left: -5%;
bottom: 80%;
left: 50%;
border: .75rem solid transparent;
border-top: none;
z-index:1;
border-bottom-color: grey;
}<div id="container">
<div id="item">Line 1</div>
<div id="plus"></div>
<div id="item">Line 2</div>
</div>You can change
#plus:hover {
position: relative;
to
#plus:hover {
position: absolute;
#container {
background: white;
left: 97px;
border-radius: 5px;
min-width: 180px;
min-height: 100px;
position: absolute;
z-index: 999;
font-size: 14px;
}
#item {
position: relative;
padding: 12px 15px 12px 30px;
display: flex;
justify-content: space-between;
}
#plus:hover {
position: absolute;
background-color: grey;
margin: 0 auto;
width: 75%;
text-align: center;
padding: 7px;
font-size: 15px;
color: white;
border-radius: 5px;
z-index: 1;
}
#plus:after {
content: '';
position: absolute;
display: block;
top: -20px;
margin-left: -5%;
bottom: 80%;
left: 50%;
border: .75rem solid transparent;
border-top: none;
z-index: 1;
border-bottom-color: grey;
}<div id="container">
<div id="item">Line 1</div>
<div id="plus"></div>
<div id="item">Line 2</div>
</div>