Прыжки по меню при наведении - PullRequest
Новая
       23

Прыжки по меню при наведении

1 голос
/ 23 апреля 2009

У меня есть веб-приложение (ASP.NET 2.0 C #). На моей главной странице у меня есть элемент управления меню, и я использую таблицу стилей CSS для стилизации различных частей меню. По какой-то причине, когда я наводю курсор мыши на меню, оно немного подпрыгивает. Я думаю, что как-то границы становятся больше, когда я нахожу над ним.

Вот стиль для всего меню: 

.menu
{
    width:110%;
    height:25px;
    border: 1px solid gray;
    text-align:center;
}

Вот мой стиль для StaticHoverStyle: 

.staticMenuHover
{
    background-color:#CCCCCC;
    border-style:solid;
    border-color:#888888;  
    text-decoration: underline;
    border-width:thin;
}

Я не знаю, почему это происходит, кто-то может помочь?

Спасибо

Ответы [ 3 ]

1 голос
/ 23 апреля 2009

Ваша ширина границы в вашем классе наведения установлена ​​на тонкий, который отображается как 2-пиксельная граница в моем тесте. Установите 1px. 

border-width:1px;

Вы также можете свернуть правило границы этого второго класса в одну строку, чтобы оно соответствовало вашему первому классу, например так: 

border:1px solid #888888;
0 голосов
/ 23 апреля 2009

Вы всегда можете добавить подчеркивание к ссылке (не текстовое оформление) и настроить отступы. Рабочий пример: 

#menu ul li a {
    display: block;
    width: 95%;
    padding: 0px 2px 2px 4px;
    text-decoration: none;
    color: rgb(30%,30%,60%); background: transparent;
}
#menu ul li a:visited {
    color: rgb(50%,10%,100%); 
}
#menu ul li a:hover {
    color: #000;
    border-bottom: 2px solid #c63; 
    background: #fcf;
    padding-bottom: 0px; }

Что делает эту работу, так это изменение нижнего отступа в 2 пикселя на 0 пикселей и добавление нижнего края в 2 пикселя в том же правиле . Изменение цвета не имеет значения для рассматриваемого вопроса.

0 голосов
/ 23 апреля 2009

Это происходит потому, что вы подчеркиваете свой текст. Попробуйте без оформления текста, и я уверен, что это решит вашу проблему.

...