css中如何讓一個盒子當滑鼠經過的時候右邊不動，往左邊增加寬度？想知道改哪個東西，增加寬度它都是左邊不動，往右邊增加，求解答
uj5u.com熱心網友回復：
<div class="test">aaa</div>
<style>
.test {
background: red;
width: 100px;
text-align: right;
color: #fff;
padding-right: 20px;
}
.test:hover {
width: 200px;
text-align: right;
}
</style>
如果里面是div可以設定右浮動float: right，顯示內容一直在右邊。寬度增加內容還是在右邊顯示，相對的就是左邊寬度增加了
uj5u.com熱心網友回復：
OK，我待會試試，謝謝解答
uj5u.com熱心網友回復：
那這樣的話，如果我把這整個層放在瀏覽器的右邊，那當盒子寬度增加的時候會不會內容就看不見了，超過了瀏覽器邊緣了uj5u.com熱心網友回復：
設定最大寬度不能大于瀏覽器寬度uj5u.com熱心網友回復：
右邊和下邊進行擴展很簡單左邊和上邊擴展就需要定位了
position定位，可以用absolute或relative、fixed定位，然后增加寬和高的時候，同時減小left和top的值即可
不用position，可以用margin-left和margin-top來設定物件的相對位置，和上邊減小left和top的原理一樣
還有很多其他方法都可以實作，看個人偏好了，float，比如text-indent
uj5u.com熱心網友回復：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<div id="fixed" style="position:fixed;width:100px;height:100px;right:100px;top:10px;border:1px solid black;">
fixed
</div>
<div id="abs" style="position:absolute;width:100px;height:100px;right:100px;top:120px;border:1px solid black;">
absolute
</div>
<div id="relative" style="position:relative;margin-left:400px;margin-top:20px;width:100px;height:100px;border:1px solid black;">
relative
</div>
<div id="flex" style="display:flex;justify-content:space-between;margin-top:110px;">
<div style="width:100px;height:100px;border:1px solid black;">固定的</div>
<div id="flexsub" style="width:100px;height:100px;border:1px solid black;">活動的</div>
</div>
<script>
var fixed_timer = null;
var abs_timer = null;
var rel_timer = null;
var sub = null;
document.getElementById('fixed').onmouseover = function(){
fixed_timer = setInterval(function(){
var el = document.getElementById('fixed');
el.style.width = (el.offsetWidth + 1) + 'px'
},50);
}
document.getElementById('fixed').onmouseout = function(){
document.getElementById('fixed').style.width = '100px'
clearInterval(fixed_timer)
}
document.getElementById('abs').onmouseover = function(){
abs_timer = setInterval(function(){
var el = document.getElementById('abs');
el.style.width = (el.offsetWidth + 1) + 'px'
},50);
}
document.getElementById('abs').onmouseout = function(){
document.getElementById('abs').style.width = '100px'
clearInterval(abs_timer)
}
document.getElementById('relative').onmouseover = function(){
rel_timer = setInterval(function(){
var el = document.getElementById('relative');
el.style.width = (el.offsetWidth + 1) + 'px';
el.style.left = el.style.left?(parseInt(el.style.left.replace('px','')) - 3)+'px':'-3px'
},50);
}
document.getElementById('relative').onmouseout = function(){
var el = document.getElementById('relative');
el.style.width = '100px'
el.style.left = '0px';
clearInterval(rel_timer)
}
document.getElementById('flexsub').onmouseover = function(){
fixed_timer = setInterval(function(){
var el = document.getElementById('flexsub');
el.style.width = (el.offsetWidth + 1) + 'px'
},50);
}
document.getElementById('flexsub').onmouseout = function(){
document.getElementById('flexsub').style.width = '100px'
clearInterval(fixed_timer)
}
</script>
</body>
</html>
反正好多方式都能實作，看具體需求和偏好了
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/135460.html
標籤：HTML5
上一篇：關于圖片與文字問題的小問題
下一篇：求一個會員登錄系統