text jumps 1 pixel to the left after hover

Question

I made a jsfiddle and as you can see when you hover the div the text jumps 1 pixel to the left. As far as I can tell this is due to the border, but I'm not sure what to do to fix it. Any ideas?

Here is my code:

#weather {
position: fixed;
top:10px;
right:35px;
transition: 0.5s ease;
cursor: pointer;
padding: 5px;
opacity:0.7;
}

#weather:hover {
opacity: 1;
border-left:1px solid #333;
border-right:1px solid #333;
}

score 4 · Accepted Answer · answered Mar 05 '15 at 03:43

4

CSS:

#weather {
    position: fixed;
    top:10px;
    right:35px;
    transition: 0.5s ease;
    cursor: pointer;
    padding: 5px;
    border-left:1px solid transparent;
    border-right:1px solid transparent;
}

Since you were introducing the border on that time of hover it was behaving like that so have a border and make it visible only when hover.

JSFiddle

answered Mar 05 '15 at 03:43

Kawinesh S K

3,148
1
16
29

I suppose that works. Is that a conventional way of fixing such a problem? – Jamie Mar 05 '15 at 03:44
1px solid **transparent** - good choice +1 – cssyphus Mar 05 '15 at 03:46
@Jamie You bet. Best solution. – cssyphus Mar 05 '15 at 03:46

score 0 · Answer 2 · answered Mar 05 '15 at 03:44

It is caused by adding 1px borders to the css. to solve the problem, add 1px white borders to begin -- or, I just noticed Kawinesh has a better solution - use 1px solid transparent. +1 to Kawinesh.

#weather {
    position: fixed;
    top:10px;
    right:35px;
    transition: 0.5s ease;
    cursor: pointer;
    padding: 5px;
    border-left:1px solid white;
    border-right:1px solid white;
}

jsFiddle Demo

text jumps 1 pixel to the left after hover

2 Answers2