Блог

Я хочу показать предварительный просмотр изображения ссылки с использованием CSS. Поведение примерно такое: когда пользователь наводит курсор мыши на ссылку, предварительный просмотр изображения появляется через 1 секунду, но при наведении курсора мыши предварительный просмотр немедленно удаляется. Теперь, чтобы убедиться, что предварительный просмотр появится через 1 секунду, я использовал transition свойство as transition-property: visibility; transition-delay: 1s . Хотя это гарантирует, что предварительный просмотр становится видимым через 1 секунду, его переход от видимого к скрытому также задерживается на 1 секунду по очевидной причине. Могу ли я убедиться, что только переход от скрытого к видимому занимает 1 секунду, а не наоборот, используя CSS?

К сожалению, вы не показали никакого кода.

Но я предполагаю, что у вас было transition свойство для класса или идентификатора … и :hover просто изменение свойства, что хорошо для применения перехода при вводе и выводе мыши.

Странно то, что вы упоминаете visibility свойство, которое не может быть передано, потому что оно не является свойством «number». Возможно, вы имели в виду opacity …

Если у вас есть transition свойство в :hover правиле… Он применяется при наведении курсора мыши (читается при вводе курсора мыши), но прямо не применяется «не парить» (считывается при выводе курсора мыши).

 #target{
  opacity: 0;
  height: 400px;
  width: 400px;
  background: blue;
}

#target:hover{
  opacity: 1;
  transition: 1s;
} 

 <div id="target"></div>