在此示例中，懸停內部 div 從右側添加寬度。
我想把它從左邊放大，怎么做。
#outer{
width: 50px;
height: 50px;
margin: auto;
}
#inner{
height: 50px;
width: 50px;
background-color: red;
transition: all .5s;
}
#inner:hover{
width: 150px;
}<div id="outer">
<div id="inner"></div>
</div>uj5u.com熱心網友回復：
調整margin-left而不是width
#outer{
width: 50px;
height: 50px;
margin: auto;
}
#inner{
height: 50px;
background-color: red;
transition: all .5s;
}
#inner:hover{
margin-left: -100px;
}<div id="outer">
<div id="inner"></div>
</div>uj5u.com熱心網友回復：
您必須將 div 固定到位，可能使用位置或邊距，然后更改寬度。
#inner {
height: 50px;
width: 50px;
margin-left: auto;
margin-right: calc(50vw - 25px);
background-color: red;
transition: width .5s;
}
#inner:hover {
width: 150px;
}<div id="outer">
<div id="inner"></div>
</div>uj5u.com熱心網友回復：
這在一定程度上取決于擴展的確切效果。
但是假設您確實希望外部元素保持在 50px 并且內部元素只是為了擴展但不影響周圍元素，您可以將其定位為絕對和正確：0。其余代碼可以保持不變（即更改寬度） .
#outer {
width: 50px;
height: 50px;
margin: auto;
position: relative;
}
#inner {
height: 50px;
width: 50px;
background-color: red;
transition: all .5s;
position: absolute;
right: 0;
}
#inner:hover {
width: 150px;
}<div id="outer">
<div id="inner"></div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/443710.html
上一篇：點擊時顯示DIV