Usa setTimeout
pero de esta manera:
$("#todo").hover(
function() {
//Esta función permite ejecutar una función después
//de n milisegundos, en tu caso serán 3000, que equivale a 3 segundos
setTimeout(function(){
$( this ).css("overflow-y", "scroll");
}, 3000);
}, function() {
//Si también quieres lograr eso cuando el usuario retire el cursor, entonces aquí también necesitarás un setTimeout
$( this ).css("overflow-y", "hidden");
});
Eso debe servirte.
Sin embargo, dentro de la función que se ejecuta en el setTimeout
, la referencia a this
no será la misma que a $("#todo")
, entonces tienes que usar:
$("#todo").css("overflow-y", "scroll");
El código quedaría así
$("#todo").hover(
function() {
setTimeout(function(){
$("#todo").css("overflow-y", "scroll");
}, 3000);
}, function() {
//Si también quieres lograr eso cuando el usuario retire el cursor, entonces aquí también necesitarás un setTimeout
$( this ).css("overflow-y", "hidden");
});
Recuerda que cada vez que selecciones o manipules el DOM
usando la función $
de jQuery
, estarás ejecutando una gran cantidad de código, una pequeña recomendación sería que guardes en una variable la referencia al objeto que seleccionaste, algo así
//Guardamos la referencia a este elemento u objeto, para su reutilización
var todo = $("#todo");
//
todo.hover(
function() {
setTimeout(function(){
todo.css("overflow-y", "scroll");
}, 3000);
}, function() {
//Si también quieres lograr eso cuando el usuario retire el cursor, entonces aquí también necesitarás un setTimeout
todo.css("overflow-y", "hidden");
});
Saludos
transition-delay:1s;