Home/ Questions/Q 7034473
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T01:11:25+00:00

this is probably very simple using javascript or jquery, but I cannot wrap my

  • 0

this is probably very simple using javascript or jquery, but I cannot wrap my head around it. I am providing a sample using a simple css box with a :hover applied in a different color. I want the box to go about the hover as it normally would, but then want the hover to last a set amount of time, regardless of mouse movement after hover. After the set time has finished, I would like the hover to reset as normal. Also if the user were to accidentally hover over the #box while the hover is being held it will not reset, it will continue to hold until after the set time has finished.

here is my html and 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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); 
    }     
}); 

});

    You can change the “delayms” variable. ( 2000 means 2 seconds)

    Working example: http://jsfiddle.net/jqT7d/1/

    Also jfriend00 suggests a simpler version: http://jsfiddle.net/jfriend00/jqT7d/3/

    • 0