Как сделать чтобы :before не вылезал вперед при наведении?
Надо сделать блоки с градиентом по бордеру и чтобы они увеличивались при наведении
Казалось, легко - сделала псевдо-элемент с заливкой градиентом, поместила его за элемент и все нормально, но если применить transform: scale(1.1); задник вылезает на первый план
как этого избежать?snippet
а если никак, то как реализовать градиентный бордер?
Дополнительно:
Надо просто фон вынести в отдельный элемент тоже:
snippet
- Спасибо!
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы элемент, стилизованный с использованием псевдоэлемента `:before`, не вылезал вперед при наведении курсора, можно использовать свойство `z-index`. `z-index` позволяет управлять порядком слоев элементов на странице.
Прежде всего, убедитесь, что у элемента, на который наводится курсор, также есть установленное значение `z-index`. Если у элемента, на который наводится курсор, нет установленного `z-index`, то браузер будет решать порядок слоев самостоятельно, что может привести к нежелательным результатам.
Пример решения проблемы с псевдоэлементом `:before` вылезающим вперед при наведении:
.element { position: relative; z-index: 1; } .element:before { content: ''; position: absolute; z-index: -1; /* устанавливаем отрицательное значение z-index */ } .element:hover:before { opacity: 0; /* скрываем псевдоэлемент при наведении */ }
В данном примере мы устанавливаем `z-index: -1` для псевдоэлемента `:before`, чтобы он оказался за основным элементом. Также при наведении курсора мы скрываем псевдоэлемент, устанавливая ему `opacity: 0`.
Таким образом, используя правильное сочетание свойств `z-index` и `opacity`, можно решить проблему с вылезанием псевдоэлемента вперед при наведении курсора на элемент.