All geek questions in one place

CSS - text moves when it hangs

I was at this for about an hour, and it seemed he was missing. Each time I hover over this text (I want to set the background color for hover), the text moves with bgcolor. Here is what I got:

#innerheader ul { list-style:none; margin:0; padding:0; } #innerheader li { display:block; float:left; height:25px; margin:0 2px; padding:15px 10px 0 10px; color:#FFFFFF; font-weight:bold; font-size:10px; text-transform:uppercase; } #innerheader li a, #innerheader li a:link, #innerheader li a:visited, #innerheader li a:active { color:#FFFFFF; text-decoration:none; } #innerheader li a:hover { background-color: blue; padding: 10px 10px 10px 10px }
+4
source share
5 answers

Remove the gasket in the guidance ad. Or just move the indent to the anchor before the freezing state, for example, the code below.

The reason the text moves does not contain indentation at the anchor, and then when you hover over it, it overlaps.

 #innerheader li a, #innerheader li a:link, #innerheader li a:visited, #innerheader li a:active { color:#FFFFFF; text-decoration:none; padding: 10px; } #innerheader li a:hover { background-color: blue; }
+10
source

This is due to filling. Remove it, then it will work fine.

+1
source

Get rid of filling, that's what makes it move.

0
source

This is a move because you are changing the padding in the guidance block. Remove it and everything should be fine.

0
source

you put the gasket on li a: hover! Of course, this will change the text. To fix this, you need to determine the width and height and reduce them by the amount of filling on hover. OR move the indent to a non-freezing state.

0
source

Source: https://habr.com/ru/post/1386024/

More articles:


All Articles