Блог

Главная - Вопросы по программированию - Как я могу поставить (рабочее) нижнее поле для зависшего ?

Как я могу поставить (рабочее) нижнее поле для зависшего ?

#html #css #margin

#HTML #css #поле

Вопрос:

Мне было интересно — при создании моего веб-сайта — как я могу поставить нижнее поле, которое поднимает a-тег вверх.

CSS:

 .navbar a {
    background-color: #494949;
    border: 1px solid #ffffff;
    font-family: sans-serif;
    font-weight: bold;
    padding: 5px 10px;
    text-decoration: none;
}
.navbar a:hover {
    text-decoration: none;
    font-family: sans-serif;
    font-weight: bold;
    color: #494949;
    padding: 10px 10px;
    border: 1px #494949 solid;
    background-color: #67E727;
}

И вот также мой html:

 <div class="navbar">
            <a href="#">Home</a>
            <a href="#">Info</a>
            <a href="#">Doneren</a>
            <a href="#">Gallerij</a>
            <a href="#">Contact</a>
</div>

Я действительно надеюсь, что вы сможете мне помочь 🙂

приветствия из Нидерландов!

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

1. Итак, вы хотите, чтобы текст ссылки перемещался вверх при наведении курсора мыши? Или?

2. Вы можете создать скрипку? И что ты здесь делаешь? Иди посмотри игру

3. установите для display:inline-block значение <a> , чтобы он мог вести себя как поле

4. вам нужно описать желаемый эффект.

Ответ №1:

Вам не нужно повторять все свойства в состоянии наведения, только те, которые вы хотите изменить. a тег — это inline элемент, посмотрите, как работает коробочная модель. Чтобы переместить его сверху при наведении, вы не можете использовать поле, вы можете использовать что-то вроде этого:

 .navbar a:hover {
  position: relative;
  top: -10px;
}

Ответ №2:

Это что-то вроде этого, что вы ищете? Он перемещает всю панель навигации немного вниз, чтобы подсветка не отключалась, и перемещает текст вверх при наведении курсора. Вот измененные части:

 .navbar{
        margin-top:20px;
}

.navbar a:hover {
    position: relative;
    top: -5px;
}