1

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

       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>
4

1 回答 1

3

您可以在鼠标悬停函数中设置超时。如果用户 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
    }

})();

此外，您要手动添加很多样式；添加一个应用样式的类怎么样？

于 2012-07-09T10:17:01.833 回答