CSS - текст перемещается при наведении

Я занимаюсь этим уже около часа и, кажется, не могу понять это.
Каждый раз, когда я навожу курсор на этот текст (я хочу установить цвет фона для его наведения), текст перемещается вместе с бгцвет. Вот что я получил:

        #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
        }

html css hover move
person Ben Dover    schedule 13.12.2011    source источник
comment
Используйте сброс CSS, чтобы избавить вас от дополнительных проблем.   -  person Scott Simpson    schedule 13.12.2011

Ответы (5)


arrow_upward
11
arrow_downward

Удалите отступы в объявлении при наведении. Или просто переместите отступ к якорю перед состоянием наведения, как в коде ниже.

Причина, по которой текст движется, заключается в том, что на якоре нет отступов, а при наведении курсора есть отступы.

#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;
    }
person Scott    schedule 13.12.2011
comment
почему тогда текст в примере ниже (3-й пример) не перемещается при наведении курсора? Я пробовал что-то подобное, и мой текст перемещается. codepen.io/Calloumi/pen/vndlH - person ajfbiw.s; 10.08.2018

arrow_upward
1
arrow_downward

Это из-за прокладки. Удалите его, тогда он будет работать нормально.

person chhantyal    schedule 13.12.2011

arrow_upward
0
arrow_downward

Избавьтесь от набивки, это то, что заставляет его двигаться.

person Michael C. Gates    schedule 13.12.2011

arrow_upward
0
arrow_downward

Он движется, потому что вы меняете отступы в блоке наведения. Удалите это, и все должно быть в порядке.

person Nate B    schedule 13.12.2011

arrow_upward
0
arrow_downward

вы добавляете отступы к li a:hover! Текст, конечно, изменится. Чтобы исправить это, вам нужно определить ширину и высоту и уменьшить их на величину заполнения при наведении. ИЛИ переместите заполнение в состояние без наведения.

person Kai Qing    schedule 13.12.2011
comment
Привет, Кай: почему тогда текст в примере ниже (3-й пример) не перемещается при наведении курсора? Я пробовал что-то подобное, и мой текст перемещается. codepen.io/Calloumi/pen/vndlH - person ajfbiw.s; 10.08.2018