html - 如何使语音框的大小自动
问题描述
我已经创建了一个语音框,但我遇到了问题我无法根据需要使语音框自动更改其大小(高度和宽度)。它应该根据其内容获取空间。如果里面的内容是大盒子尺寸应该固定在里面如果内容是小盒子应该自动缩小尺寸
.hide {
display: none;
}
.speech {
position: absolute;
left: 0;
top: -22rem;
width: 400px;
height: 300px;
text-align: center;
line-height: 100px;
background-color: #fff;
border: 8px solid #ff5733;
-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: 300px;
border: 15px solid;
border-color: #fff transparent transparent #fff;
}
.speech:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 30px;
top: 300px;
border: 25px solid;
border-color: #ff5733 transparent transparent #ff5733;
}
.myDIV {
position: relative;
}
.myDIV:hover .speech {
display: block;
color: green;
}
<h2>Display an Element on Hover</h2>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<span><span>
hello buddy how do you do <span class="myDIV"> Hover over me.<span class="speech">I am shown when someone hovers over the div above.<p>Other content</p>
<p>Other content</p>
<p>Other content</p></span></span></span> well I am moe optional
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<span><span>
hello buddy how do you do <span class="myDIV"> Hover over me.<span class="speech">I am shown when someone hovers over the div above.</span></span></span> well I am moe optional
解决方案
在更新的代码下方。检查评论:
.hide {
display: none;
}
.speech {
position: absolute;
left: 0;
/*top: -22rem; removed*/
bottom:calc(100% + 33px); /* added */
width: 400px;
/* height: 300px; removed */
text-align: center;
line-height: 100px;
background-color: #fff;
border: 8px solid #ff5733;
border-radius: 30px;
box-shadow: 2px 2px 4px #888;
display: none;
}
.speech:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 38px;
/*top: 300px; removed*/
top:100%; /* added */
border: 15px solid;
border-color: #fff transparent transparent #fff;
}
.speech:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 30px;
/*top: 300px; removed*/
top:100%; /* added */
border: 25px solid;
border-color: #ff5733 transparent transparent #ff5733;
}
.myDIV {
position: relative;
}
.myDIV:hover .speech {
display: block;
color: green;
}
<h2>Display an Element on Hover</h2>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<span><span>
hello buddy how do you do <span class="myDIV"> Hover over me.<span class="speech">I am shown when someone hovers over the div above.<p>Other content</p>
<p>Other content</p>
<p>Other content</p></span></span></span> well I am moe optional
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<p>Other content</p>
<span><span>
hello buddy how do you do <span class="myDIV"> Hover over me.<span class="speech">I am shown when someone hovers over the div above.</span></span></span> well I am moe optional
推荐阅读
- html - JS 在 HTML 页面的自定义标签内找不到标签
- javascript - 无法使用 findOneAndUpdate 更新 MongoDB 中的记录
- c# - Azure Key Vault 证书证书标识符、秘密标识符、密钥标识符之间的区别
- java - 如何正确安装 Java?因为当我安装它并转到终端时,它给了我一条错误消息,知道我有一台 MacBook Pro
- python - 熊猫:显示整行而不截断
- react-native - 如何计算屏幕绘制区域的百分比?
- excel - 使用第一列值查找日期总和
- spring-boot - Spring Boot:@Value 返回 null
- c - 显示“端口打开/关闭”的程序
- python - Python xlwings不能在不同的excel文件中工作