Question

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

       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

您可以在鼠标悬停功能中保持超时。如果用户在超时之前的鼠标输出已启动，则超时将被取消。（因此，我在此处演示了鼠标悬停和鼠标悬停处理程序都需要访问超时）。

(function() {

    var mo_timeout;

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

    }

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

})();

此外，您需要手动添加很多样式;如何添加类，而不是应用样式？

javascript鼠标随着时间的推移像电子书网站

1 个答案: