像电子书网站一样的javascript鼠标时间延迟

Question

我需要鼠标悬停时间延迟的代码，例如 ebooks.com(畅销书标签)， 这是我的 javascript 代码，一切都很好，但我需要时间延迟 onmouse over，

       var prevnum=0;
   var cate="cat1";
function mouseoverfn(id){

    document.getElementById("bestsellerin_book_"+id).style.display='block';
    prevnum!=id?document.getElementById("bestsellerin_book_"+prevnum).style.display='none':'';
    document.getElementById(cate).style.background='#ffffff';
    document.getElementById(cate).style.color='#000';
    document.getElementById(cate).style.posistion='absolute';
    mouseoutfn(id)
    prevnum=id;
}

function mouseoutfn(id){

    document.getElementById("bestsellerin_book_"+prevnum).style.display='none';
    document.getElementById("bestsellerin_book_"+id).style.display='block';
    document.getElementById("cat"+id).style.background='#94B83E';
    document.getElementById("cat"+id).style.color='#ffffff';


    cate="cat"+id;
}

HTML:

<div class="bestsellerin_txt_content" id="cat<?php echo $i; ?>" onmouseout="mouseoutfn(<?php echo $i; ?>)" onmouseover="mouseoverfn(<?php echo $i; ?>)">
    <span style="padding-left:4px;"><?php 
        echo substr(ucwords(strtolower($assigned_cat[$i]['Category']['name'])) , 0, 22);
        if( strlen($assigned_cat[$i]['Category']['name']) > 22){ 
            echo "..";
        }
    ?></span>
</div>

Answer 1

您可以在鼠标悬停功能中设置超时。如果用户 mouseout 在超时之前，超时将被取消。 (出于这个原因，您的 mouseover 和 mouseout 处理程序都需要能够访问超时，正如我在此处演示的那样)。

(function() {

    var mo_timeout;

    function mouseover() {
        mo_timeout = setTimeout(function() {
            //mouseover code here
        }, 1000);

    }

    function mouseoutfn(id){
        clearTimeout(mo_timeout);
        //mouseout code here
    }

})();

另外，您需要手动添加大量样式；添加一个应用样式的类怎么样？