当悬停HTML中的元素时，如何制作左侧弹出框？
当悬停HTML中的元素时，如何制作左侧弹出框？
提问于 2019-05-18 06:38:49
当鼠标悬停在某个HTML元素上时，有没有办法使文本内容弹出框出现？
我需要覆盖图来适应它的内容，因为它现在的方式是裁剪文本，它得到的是HTML元素的高度，而不是其内容的高度。
只剩下幻灯片了，但我觉得没问题。稍后我将把html元素放在页面的右边，但我需要能够从弹出窗口的起始点设置页边距，因为它正好滑动到HTML元素的旁边，我希望中间留出一些空间。
这是我到目前为止所得到的：
.container {
position: absolute;
width: 40%;
}
.overlay {
position: absolute;
bottom: 0;
right: 100%;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: 0.5s ease;
}
.overlay:hover {
display: none;
}
.container:hover .overlay {
width: 100%;
right: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}<div class="container">
My Text
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
我该怎么做呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-18 07:03:33
看看这是不是你想知道的事情：
#container {
width: 100%;
height: auto;
text-align: center;
margin: 0 auto;
}
.link {
position: relative;
display: inline-block;
}
.link .tip {
visibility: hidden;
width: 0;
height: 100px;
opacity: 0;
background-color: #008CBA;
color: #fff;
text-align: center;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
transition: 0.5s ease;
overflow: hidden;
margin-right: 20px;
}
.link:hover .tip {
visibility: visible;
width: 150px;
height: auto;
opacity: 1;
}<div id="container">
<div class="link">Hover me now !
<span class="tip">
Some few text here<br><br>
Let's try something else<br><br>
And adding more info here too<br><br>
And even a bit more here also
</span>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56194358
复制相关文章
相似问题
腾讯云开发者
