Reputation: 111
I have created a test page and I have a problem. I set that if I hover over sample 2, it will change it's font size.
#button:hover {
background-color: pink;
font-size: 15px; }
But if I hover over it, the sample 3 text moves down a little bit. How can I disable absolute moving of sample 3 ? Thanks
Upvotes: 2
Views: 77
Reputation: 8402
if I hover over it (button), the sample 3 (assuming this is an element below button) text moves down a little bit.
Consider the following issue
sample3
which is an html element shifts downwards. See snippet below
#button1,#button2{
width:100px;
}
#button1:hover {
background-color: pink;
font-size: 20px;
position: relative;
}
<div id="button1">
Option1
</div>
<div id="#button2">
Option2
</div>
One way you can strategically prevent your layout from shifting or glitching is
see snippet below
#button1,
#button2 {
min-height: 45px;
width: 100px;
line-height:2em;
}
#button1:hover,
#button2:hover {
background-color: pink;
font-size: 20px;
position: relative;
}
<div id="button1">
Option1
</div>
<div id="button2">
Option2
</div>
Upvotes: 2