Увеличение размера шрифта ссылки с помощью: hover вызывает мерцание в Firefox.Зачем? - PullRequest
Новая
       20

Увеличение размера шрифта ссылки с помощью: hover вызывает мерцание в Firefox.Зачем?

2 голосов
/ 25 октября 2011

Рассматриваемый вопрос можно найти здесь: http://www.test.terribleobject.com/breathing-stillness/

Третья ссылка в меню мигает при наведении мыши.Я предполагаю, что это связано с разрывом строки, потому что этот пункт меню очень длинный, но сейчас я не могу найти решение.

Проблема не очевидна в Chrome.

Я использую Mac и самый последний FF.

Вот css: 

.menu-item a {
      background: none repeat scroll 0 0 #FEFEFE;
      border: 1px solid #103A02;
      border-radius: 5px 50px 5px 5px;
      font-family: 'IM Fell English SC';
      font-size: 1.3em;
      padding: 0 20px 0 10px;
      text-decoration: none;
      text-transform: lowercase;
    }

    .menu-item a:hover {
      background: #999;
      color: #fefefe;
      padding-left: 15px;
      font-size: 1.4em;
    }

Спасибо за вашу помощь.У меня такое чувство, что ответ довольно очевиден.

Ответы [ 3 ]

2 голосов
/ 25 октября 2011

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

Вы должны

  1. увеличить width пунктов меню
  2. уменьшить изменение font-size (скажем, с 1.4em до 1.35em)
  3. добавить право margin

Еще лучше, вы должны отменить изменение font-size и вместо этого изменить background-color и только цвет текста.

Кстати, я проверил это в Chrome, и это тоже нарушает компоновку.

0 голосов
/ 25 октября 2011

Не меняйте размер шрифта при наведении, вместо этого измените цвет.Вся часть увеличивается при наведении курсора

0 голосов
/ 25 октября 2011

Мерцание почти наверняка происходит из-за того, что различные размеры шрифта запускают / не запускают эффект :hover.Я предлагаю вам не менять размер шрифта при наведении курсора и переходить к более тонким изменениям, таким как жирность или изменение цвета

...