Блог

Главная - Вопросы по программированию - Наведите курсор мыши на нижнюю панель с помощью CSS

Наведите курсор мыши на нижнюю панель с помощью CSS

#html #css

#HTML #css

Вопрос:

Итак, у меня есть эта строка меню. Это неупорядоченный список, и строка меню отделена от содержимого страницы тонким, легким подчеркиванием. Теперь я хочу, чтобы при наведении курсора мыши на ссылку столбец должен иметь жирное подчеркивание (не текст).

Мой css выглядит так:

 .main-navbar
{
    background-color:#fff;
    border-bottom:1px solid #f2f2f2;    
}

.main-navbar-item li a:hover
{

    border-bottom: 5px solid #dddddd;
}

Это работает нормально, и я вижу, что при наведении курсора мыши отображается толстая нижняя граница. Однако main-navbar строка опускается, чтобы разместить дополнительные 5 пикселей при наведении курсора мыши, и возвращается при наведении курсора мыши. Как я могу гарантировать, что наведение курсора мыши на нижнюю панель не нарушает подчеркивание основной панели навигации?

Как всегда, любая помощь приветствуется!

Комментарии:

1. можете ли вы опубликовать свой код здесь jsbin.com

2. Обманным способом было бы использовать поле, чтобы вернуть 5 пикселей. Например, margin-bottom: -5 пикселей; DEMO

3. @Ruddy: это работает, но тогда толстая полоса при наведении курсора мыши отображается под основной строкой панели навигации, но я хочу, чтобы она была над строкой панели навигации…

4. @open_sourse Можете ли вы показать мне демонстрацию, пожалуйста. Это было бы намного проще, поскольку это было всего лишь предположение.

5. @Ruddy и тест ребят: позвольте мне попытаться перенести его в jsfiddle

Ответ №1:

Мое лучшее мнение — уменьшить 5 пикселей от нижнего отступа

Например — см. Ниже CSS:

 CSS:
.main-navbar-item li a{
padding:15px  10px;
}
.main-navbar-item li a:hover 
{
padding:15px 10px 10px 10px ;
 border-bottom: 5px solid #dddddd;
}
Метки: