Как задать Hover эффект при наведение на картинку с таймаутом?

Question

[Евгений]

Здравствуйте,

Необходимо задать Hover эффект, который будет срабатывать не сразу при наведение на картинку, а только, если курсор мыши задержался на картинке на 1 сек. В случае, если курсор только "задел" картинку, то ничего не выполняется. Как это можно реализовать?

Пробовал:

setTimeout(function() {
	...
}, 500)

но, это только отсрочивает запуск эффекта.

<div class="thumb">
	<a href="#">
		<img src="preview-1.jpg"/>
	</a>
</div>
<div class="thumb">
	<a href="#">
		<img src="preview-2.jpg"/>
	</a>
</div>

Answer 1

[Сергей delphinpro]

Начинали вы правильно, но не доделали чуток :)

jsfiddle.net/DelphinPRO/b1ybz2jn

Answer 2

[Евгений Петров]

div .thumb {
transition: 0s background-color;
}

div .thumb:hover{
background-color:red;
transition-delay:1s;
}

Comments

[Евгений]

Спасибо, но CSS реализация не подходит. В моем случае, hover-эффектом является preload-анимация, которая исчезает после загрузки всей картинки.