Показать span при наведении родителя и скрыть его с помощью только CSS

Question

Мне нужно показать span при наведении указателя мыши и спрятать его на мыши через 2 секунды. Ниже приведен код, который я сделал. Это можно сделать с помощью JS. Тем не менее, мне нужно Решение только для CSS.

Текущая скорость, чтобы показать пролет, идеальна. Мне нужно просто спрятать его на мыши через 2 секунды.

.hoverBox span { 
 
    opacity: 0; 
 
    transition: opacity 0.5s; 
 
} 
 
.hoverBox:hover span { 
 
    opacity: 1; 
 
}

<div class="hoverBox">Mouse hover <span>Hello</span></div>

Answer 1

Вы можете добавить третий параметр для перехода

.hoverBox span { 
 
    opacity: 0; 
 
    transition: opacity 0.5s 1s; 
 
} 
 
.hoverBox:hover span { 
 
    opacity: 1; 
 
    transition: opacity 0.5s; 
 
}

<div class="hoverBox">Mouse hover <span>Hello</span></div>

Answer 2

Конечно, вы можете получить такое поведение легко с CSS-анимации. Время анимации 2s происходит после перехода непрозрачности 0.5s, поэтому, если вы хотите, чтобы все было в две секунды, вы можете изменить время анимации до 1.5s.

.hoverBox span { 
 
    opacity: 0; 
 
    transition: opacity 0.5s; 
 
} 
 
.hoverBox:hover span { 
 
    opacity: 1; 
 
    animation: glimpse 2s linear; 
 
    animation-fill-mode: forwards; /* This is to make it only play once */ 
 
} 
 
@keyframes glimpse { 
 
    0% { opacity: 1; } 
 
    99% { opacity: 1; } 
 
    100% { opacity: 0; } 
 
}

<div class="hoverBox">Mouse hover <span>Hello</span></div>

Answer 3

Вы можете использовать transition-delay, чтобы заставить его исчезнуть после 2s:

.hoverBox span { 
    opacity: 0; 
    transition: opacity 0.5s; // or transition:opacity 0.5s 2s; the 3rd param is the delay. 
    transition-delay:2s; 
} 
.hoverBox:hover span { 
    opacity: 1; 
    transition-delay:0s; 
} 

https://jsfiddle.net/bk9vnubx/