javascript - Show a div only when user hover an element for couple seconds - Stack Overflow

admin管理员组

文章数量:1291618

I have an hidden div, and I want to show the hidden div only when user's mouse over another a trigger element for several seconds instead show the hidden div once the user hover the trigger element

here is my javascript code

$('.c_like_icon').mouseover(


function() {
        var timeout = setTimeout(function(){
            var ment_id=$(this).attr('data-mentId');

    $.ajax({
    url: 'ajax_c_like_user.php',
    method:'post',
    data:{ment_id:ment_id},
    success:function(data){

    var like_num=$('#'+ment_id+'c_like_number').text();
    if(like_num>=1){
        $('#'+ment_id+'like_user_w').html(data);
        $('#'+ment_id+'like_user_w').show();
    }
    else{
            $('#'+ment_id+'like_user_w').hide();


    }   
    }
       })     
        }, 2000); //2 seconds
    },
    function(){
        var ment_id=$(this).attr('data-mentId');
        clearTimeout(timeout); //cancel the timeout if they hover off
            $('#'+ment_id+'like_user_w').hide();
        // do stuff when hover off
    }
    )

I have an hidden div, and I want to show the hidden div only when user's mouse over another a trigger element for several seconds instead show the hidden div once the user hover the trigger element

here is my javascript code

$('.c_like_icon').mouseover(


function() {
        var timeout = setTimeout(function(){
            var ment_id=$(this).attr('data-mentId');

    $.ajax({
    url: 'ajax_c_like_user.php',
    method:'post',
    data:{ment_id:ment_id},
    success:function(data){

    var like_num=$('#'+ment_id+'c_like_number').text();
    if(like_num>=1){
        $('#'+ment_id+'like_user_w').html(data);
        $('#'+ment_id+'like_user_w').show();
    }
    else{
            $('#'+ment_id+'like_user_w').hide();


    }   
    }
       })     
        }, 2000); //2 seconds
    },
    function(){
        var ment_id=$(this).attr('data-mentId');
        clearTimeout(timeout); //cancel the timeout if they hover off
            $('#'+ment_id+'like_user_w').hide();
        // do stuff when hover off
    }
    )

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Feb 22, 2014 at 4:11 kesong asked Feb 22, 2014 at 3:40 kesongkesong 32911 gold badge55 silver badges1414 bronze badges 2

• you need to share the html and other scripts that you have tried – Arun P Johny Commented Feb 22, 2014 at 3:42
• Write a mouseenter handler that uses setTimeout to show the div after a delay. – Barmar Commented Feb 22, 2014 at 3:42

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

define a timeout in your hover in function and clear in the hover out function, to prevent it being fired if they leave before the time runs out, like this:

var timeout;
$('#trigger').hover(
    function() {
        timeout = setTimeout(function(){
            // do stuff on hover
            $('#hiddenDiv').show();
        }, 2000); //2 seconds
    },
    function(){
        clearTimeout(timeout); //cancel the timeout if they hover off
        // do stuff when hover off
        $('#hiddenDiv').hide();
    }
);

You can very easily do this CSS only. No jquery is required which presents a huge benefit as it is a big library to download. Just use delayed transitions. Here is my example (live demo here: http://codepen.io/anon/pen/jbGhi):

HTML

<div id="first"></div>
<div id="second"></div>

In this example, the ids are not necessary but I find it better to understand what happens.

CSS

for the purpose of this example, I'll stylize the divs (to make the hover effect more obvious) but none of the following really matters:

div{
    height: 50vmin;
    width: 50vmin;
    border: solid 5px black;
    float: left;
    margin-right: 10vmin;
}

and this is where the magic happens:

div#first:hover ~ div#second{
    transition: all 0.2s ease 1s;
    background-color: green;
}

We are using the css selector "~" that means "any sibling element after (and their children)". In that example it means "a div called #second that is sibling and after a div called #first that is hovered". Basically, as long as the second div is a sibling and after or contained within a sibling (that is after) of the first one, you'll get the desired effect.

And there you go. You can add more delay (change "1s" to whatever duration) before the change occurs, and you can smoothen the transition itself (change "0.2s" to whatever duration).

PS: in the CSS, don't forget to add all vendor prefixes for transition and transform. Always check caniuse. to know which prefixes are needed. Example:

-webkit-transition: all 1s;
transition: all 1s;

i know its an old question, but i think it should have a vanilla solution

// Element will be the triggerer
let timeOut;

element.addEventListener('mouseover', (e) => {
  timeOut = setTimeout(() => {
    // Do your stuff here
  }, 400);
});


element.addEventListener('mouseout', (e) => {
  clearTimeout(timeOut);
});

本文标签： javascriptShow a div only when user hover an element for couple secondsStack Overflow