@LI4NOOST

Как сделать появление карандашика при наведении?

<section class="profile">
            <img class="profile__avatar" src="<%=require('./images/jpg/kysto.jpg')%>" alt="Кусто">
            <article class="profile__info">
                <div class="profile__heading">
                    <h1 class="profile__name">Жак-Ив Кусто</h1>
                    <button type="button" class="profile__edit-button"></button>
                </div>
                <p class="profile__subtitle">Исследователь океана</p>
            </article>
            <button type="button" class="profile__add-button"></button>
        </section>
        <section class="elements">

.profile__avatar {
    max-width: 168px;
    max-height: 127px;
    border-radius: 50%;
    margin: 0 30px 0 0;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 879px) {
    .profile__avatar {
        margin: 0 auto;
    }
}
.profile__avatar:hover::before{
    content: url("../../../images/vector/pansel.svg");
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    background-color: black;
}

Нужно, что бы при наведении на аватар, появлялась svg картинка. В devtools показывается, что при наведении что то происходит, но посмотреть не могу, так как убираю курсор и все пропадает... Картинки поверх, почему то так и не видно
  • Вопрос задан
  • 75 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы