Question

使用javascript或jquery可能非常简单，但我无法绕过它。我正在使用一个简单的css框提供一个示例，其中：hover应用于不同的颜色。我希望盒子按照正常情况进行悬停，但是然后希望悬停持续一段时间，而不管鼠标悬停后的移动。设定的时间结束后，我希望悬停重置正常。此外，如果用户在悬停时不小心将鼠标悬停在#box上，它将不会重置，它将一直保持到设定的时间结束。

这是我的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>

Answer 1

<强> 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/

Answer 2

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

鼠标悬停后应用定时保持到css悬停元素

2 个答案: