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

マウスオーバー機能にタイムアウトを設定できます。タイムアウトになる前にユーザーのマウスアウトがあった場合、タイムアウトはキャンセルされます。(このため、ここで示すように、マウスオーバー ハンドラーとマウスアウト ハンドラーの両方からタイムアウトにアクセスできる必要があります)。

(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 に答える