, применяя временное удержание после наведения курсора на элемент hover css

, это, вероятно, очень просто с использованием javascript или jquery, но я не могу обернуть вокруг него голову. Я предоставляю образец, используя простой поле css с: зависанием, применяемым в другом цвете. Я хочу, чтобы ящик обходил курсор, как обычно, но затем нужно, чтобы зависание длилось определенное количество времени, независимо от движения мыши после зависания. По истечении заданного времени я бы хотел, чтобы зависание было сброшено как обычно. Кроме того, если пользователь случайно наводил курсор на #box во время удерживания, он не будет сброшен, он будет продолжать удерживаться, пока по истечении установленного времени., применяя временное удержание после наведения курсора на элемент hover css

вот мой HTML и CSS

#box { 
      width: 200px; 
      height:300px; 
      background-color: #00CCFF; 
    } 

    #box:hover { 
      width: 200px; 
      height:300px; 
      background-color: #669933; 
    } 

    <!DOCTYPE html> 
<html> 
<head> 
</head> 
<body>  
    <div id="box" </div> 

</body>

источник

2012-01-10 TheRodStu

CSS

.box-normal { 
     width: 200px; 
     height:300px; 
     background-color: #00CCFF; 
} 

.box-hover { 
     width: 200px; 
     height:300px; 
     background-color: #669933; 
}

HTML

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 

    <div id="box" class="box-normal"> dsfdsf</div> 

</body>

JQuery

$(function() { 
var delayms = 2000; 

$("#box").mouseenter(function(){ 
    if ($("#box").hasClass('box-normal')) 
    { 
     $("#box").removeClass('box-normal').addClass('box-hover'); 
     window.setTimeout(function() { 
      $("#box").removeClass('box-hover').addClass('box-normal'); 
     }, delayms); 
    }  
}); 

});

Вы можете изменить переменную «delayms». (2000 означает 2 секунды)

Рабочий пример: http://jsfiddle.net/jqT7d/1/

Также jfriend00 предлагает более простой вариант: http://jsfiddle.net/jfriend00/jqT7d/3/

источник

2012-01-10 06:14:17 JCasso

Почему использовать 'бокс-normal' и' бокс-hover'? У вас может быть только CSS по умолчанию, который заменяется на «box-hover» и меняет только один класс вместо двух. Это упростило бы это. – jfriend00

Для этого упрощения см. Http://jsfiddle.net/jfriend00/jqT7d/3/. – jfriend00

не уверен, что я понял. Вы имеете в виду это http://jsfiddle.net/jqT7d/4/ – JCasso

ul.navigator-wrap-inner li.thumbnail_resize:hover { 
    border-color:#184ACD; 
    -moz-transition: border-color 0.4s ease-in-out 0s; 
}

источник

2012-05-28 07:01:44

, применяя временное удержание после наведения курсора на элемент hover css

ответ

Смежные вопросы