How to make a box in the CSS when the mouse through the right, to the left to increase the width?-CodePudding

How to make a box in the CSS when the mouse through the right, to the left to increase the width? Want to know which things change, and increase the width of it is left untouched, increases to the right, please answer

CodePudding user response:

 
 
<style> 
The {
background: red; 
width: 100px; 
text-align: right; 
color: #fff; 
padding-right: 20px; 
} 
The: hover {
width: 200px; 
text-align: right; 
} 
</style>

If it is div can be set right float float: right, display content has been on the right side, the width increase content or on the right, according to relative to the increase of the width is on the left

CodePudding user response:

reference 1/f, three dozen soy sauce response:

 
 
<style> 
The {
background: red; 
width: 100px; 
text-align: right; 
color: #fff; 
padding-right: 20px; 
} 
The: hover {
width: 200px; 
text-align: right; 
} 
</style> 
If it is div can be set right float float: right, display content has been on the right side, width increase content or on the right, according to the relative is the increase of the width on the left side of the

OK, I'll try, thank you for your answer

CodePudding user response:

That in this way, if I put the whole layer on the right side of the browser, that when the increase of the width box will content can't see, over the edge of the browser

CodePudding user response:

Set the maximum width cannot be greater than the width of the browser

CodePudding user response:

The right and bottom extend easy

The left and top extension will need to locate the

The position location, can use absolute or relative, fixed position, and then increase the width and height, and reduce the value left and top

No position, can use a margin - left and margin - top to set the relative position of objects, and a decrease in top left as well as the principle of top

There are many other methods can achieve depends on personal preferences, float, such as text - indent

CodePudding user response:

 & lt; ! Doctype html> 
 
<meta charset="utf-8" & gt; 
<meta name="Generator" content="EditPlus?"> 
<meta name="Author" content="" & gt; 
<meta name="Keywords" content="" & gt; 
<meta name="Description" content="" & gt; 
 Document 
 
<body> 
 
Fixed 
 
 
Absolute 
 
 
Relative 
 
 
 Fixed & lt;/div> 
 Activities & lt;/div> 
 
<script> 
Var fixed_timer=null; 
Var abs_timer=null; 
Var rel_timer=null; 
Var sub=null; 
Document. The getElementById (' fixed '). onm ouseover=function () {
Fixed_timer=setInterval (function () {
Var el=document. GetElementById (" fixed "); 
El. Style. The width=(el) offsetWidth + 1) + 'px' 
}, 50); 
} 
Document. The getElementById (' fixed '). onm ouseout=function () {
Document. GetElementById (' fixed ') style. The width="100 px" 
ClearInterval (fixed_timer) 
} 
Document. The getElementById (' abs'). onm ouseover=function () {
Abs_timer=setInterval (function () {
Var el=document. GetElementById (' abs'); 
El. Style. The width=(el) offsetWidth + 1) + 'px' 
}, 50); 
} 
Document. The getElementById (' abs'). onm ouseout=function () {
Document. GetElementById (' abs') style. The width="100 px" 
ClearInterval (abs_timer) 
} 
Document. The getElementById (' relative '). onm ouseover=function () {
Rel_timer=setInterval (function () {
Var el=document. GetElementById (" relative "); 
El. Style. The width=(el) offsetWidth + 1) + 'px'; 
El. Style. Left=el. Style. Left? (parseInt (el) style. Left. Replace (' p ', ')) - 3) + 'px' : '- 3 px' 
}, 50); 
} 
Document. The getElementById (' relative '). onm ouseout=function () {
Var el=document. GetElementById (" relative "); 
El. Style. The width="100 px" 
El. Style. Left='0 px; 
ClearInterval (rel_timer) 
} 
Document. The getElementById (' flexsub). onm ouseover=function () {
Fixed_timer=setInterval (function () {
Var el=document. GetElementById (' flexsub '); 
El. Style. The width=(el) offsetWidth + 1) + 'px' 
}, 50); 
} 
Document. The getElementById (' flexsub). onm ouseout=function () {
Document. GetElementById (' flexsub) style. The width="100 px" 
ClearInterval (fixed_timer) 
} 
</script>

Anyway, a lot of ways can be implemented, the specific needs and preferences