Как создать hover поверх элемента?

Ссылка скопирована
CSS HTML PHP
19 марта 2026 1 ответ

Добрый день!
Нужно, чтобы при наведение на любую из кнопку верхний и нижний бордер меняли цвет.
Это список кнопок с верхним бордером. У последней кнопки есть еще нижний.
Сделала нижнюю линию псевдо классом after. На скрине bottom -5px. Он соответственно не совпадает с линией. Когда делаю -1px, линия должна совпасть, но она вообще перестает появляться.
Возможно ли что то подправить и таким образом решить вопрос?
Или есть другое решение?
Заранее спасибо.

Как создать hover поверх элемента?

Дополнительно:

а использовать что-то типа :hover + * для перекрашивания бордера не вариант?
https://doka.guide/css/combined-selectors/#smezhny...

  • В вопросах с вёрсткой нужно прикладывать интерактивную демку, чтобы мы могли вам сказать, почему у вас "при -1px линия не появляется".
    Но IvanU7n уже дал вам правильное решение.
  • IvanU7n, сейчас почитаю. Спасибо

    • Нужно, чтобы при наведение на любую из кнопку верхний и нижний бордер меняли цвет.

    snippet

    • так изначально пробовала делать, но проблема в том, что у соседних элементов бордер накладывается, и в середине линии становятся жирнее, чем сверху и снизу.
    • AnnaTopTop, обновил ответ, теперь не накладывается и линии не становятся жирнее
    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Павел Админов Ответ

    Для создания hover-эффекта поверх элемента веб-страницы можно использовать CSS псевдоэлементы :hover и ::before или ::after.

    Пример создания hover-эффекта поверх элемента с использованием псевдоэлемента ::after:

     
    .element {
        position: relative;
    }
 
    .element:hover::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* прозрачный черный цвет */
    }
 
 
<div class="element">
    <img src="image.jpg" alt="Image">
</div>

    .element { position: relative; } .element:hover::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* прозрачный черный цвет */ } <div class="element"> <img src="image.jpg" alt="Image"> </div>

    В данном примере, при наведении курсора на элемент с классом .element, создается псевдоэлемент ::after, который занимает всю площадь элемента и имеет задний фон черного цвета с прозрачностью 0.5.

    Таким образом, при наведении курсора на элемент, появляется hover-эффект поверх него.

    Также можно использовать другие свойства CSS, такие как opacity, transform, box-shadow и другие, чтобы создать более интересные и креативные hover-эффекты.

    Надеюсь, это поможет вам создать желаемый hover-эффект на вашем веб-сайте!

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ JavaScript Как мне в данном запросе обработать ошибку с определенным статусом? 1 ответ