时间戳

首页 > 解决方案 > 如何使语音气泡出现在文本中的悬停上

html - 如何使语音气泡出现在文本中的悬停上

问题描述

我想在悬停时出现一个包含文本信息或图像的语音框。当鼠标移动悬停的文本时，语音框就像维基百科一样出现。我曾尝试通过创建一些代码，但问题是该框未与悬停的文本对齐，当我在文本中添加语音框时，我无法在段落中使用语音框，该文本获取单独的段落. 我希望你能理解我想知道的，如果不尝试我帮助创建一个信息框，就像维基百科一样。

我写的代码：--

.hide {
  display: none;
}

.speech {
  position: relative;
  width: 400px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background-color: #fff;
  border: 8px solid #666;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  -webkit-box-shadow: 2px 2px 4px #888;
  -moz-box-shadow: 2px 2px 4px #888;
  box-shadow: 2px 2px 4px #888;
  display: none;
}

.speech:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 38px;
  top: 100px;
  border: 15px solid;
  border-color: #fff transparent transparent #fff;
}

.speech:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 30px;
  top: 100px;
  border: 25px solid;
  border-color: #666 transparent transparent #666;
}

.myDIV:hover+.speech {
  display: block;
  color: red;
}
<h2>Display an Element on Hover</h2>


<div class="myDIV">Hover over me.</div>
<div class="speech">I am shown when someone hovers over the div above.</div>

标签： htmlcss

解决方案

  1. 将您的 div 放在另一个相对定位的 div 中。
  2. Speech div 应该是相对父 div 的第一个孩子，并且定位绝对。
  3. 然后，您可以通过以下样式调整语音 div：“顶部：xxpx；左侧：xxpx”。
  4. 将 css 更改为在父 div 悬停时显示 .speech。

你应该有相对位置的父 div，这样你的对话气泡就可以根据父的位置进行调整。

下面是一个示例：

<div style="position:relative;">
    <div style='position:absolute' class="speech">I am shown when someone hovers over the div above.</div>
    <div class="myDIV">Hover over me.</div>
</div>

推荐阅读