我創建了一個語音框，但我遇到了問題，我無法使語音框根據需要自動更改其大?。ǜ叨群蛯挾龋?。它應該根據其內容獲取空間。如果其中的內容較大，框大小應固定在其中 如果內容較小，框應自動縮小大小.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;}
1 回答
ABOUTYOU
TA貢獻1812條經驗 獲得超5個贊
下面是更新后的代碼。查看評論：
.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
- 1 回答
- 0 關注
- 202 瀏覽
添加回答
舉報
0/150
提交
取消