Показывать элементы при загрузке страницы в течение 5 секунд, затем удалять и снова показывать при наведении, желательно только CSS - PullRequest
Новая
       46

Показывать элементы при загрузке страницы в течение 5 секунд, затем удалять и снова показывать при наведении, желательно только CSS

1 голос
/ 10 марта 2020

Я хочу sh, чтобы показать некоторую информацию поверх изображения, я хотел бы показать ее при загрузке страницы и удерживать ее в течение 5 секунд, затем исчезнуть и снова появляться при наведении (и также может оставаться снова в течение минимум 5 секунд). , но это не обязательно, просто чтобы снова быть видимым при наведении).

Если это помогает, решение не должно препятствовать тому, чтобы элементы занимали пространство, когда они не видны.

Это это то, что у меня пока, работает, первая часть, показывать при загрузке страницы и держать в течение 5 секунд: 

    #image .details {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;  
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes cssAnimation {
    to {
        opacity:0;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        opacity:0;
    }
}

Но, мне не удается снова показать его и продолжать зависать?

1 Ответ

0 голосов
/ 10 марта 2020

У вас в данный момент нет CSS при наведении курсора. Я думаю, что это должно достичь желаемого результата: 

#image .details {
    transition: opacity 1s ease-in;
}

#image:hover .details {
    opacity: 1;
}

Возможно, вам придется адаптировать его в зависимости от вашей разметки HTML (в зависимости от того, над каким элементом курсор фактически будет зависать).

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

...