0

DIV 内の文字に (配列から) 異なる色をランダムに割り当て、ホバー時にこれらの色を変更する次のスクリプトがあります。スクリプトは、マウスが DIV を離れたとき (つまり、ホバーしていないとき) に色を元に戻すことになっています。Firefox ではそうしていますが、他のブラウザー (Safari、Chrome、IE) ではそうではありません。また、これらのブラウザでもクリック機能が正しく動作しません (これも Firefox にあります)。

ここでスクリプトの動作を確認できます。

誰かがこれのトラブルシューティングを手伝ってくれるのだろうか?

ありがとう、

ニック

$(document).ready(function() {
  var test = $("#example p").text().split('');

    var normal = generateColors(test);
    var hover = generateColors(test);
    $("#example p").html(normal);

    $("#example").hover( 
      function(event) { $("#example p").html(hover) }, 
      function(event) { $("#example p").html(normal) });

    $("#example").click(function() { 
    location.href = "http://www.google.co.uk"; 
    });

});

function generateColors(characters) {
    var result = "";
    var i = 0;
    for(i=0; i < characters.length; i++) {
        result += "<span style='color:"+getColor()+"'>"+characters[i]+"</span>";
    }

   return result;
}        

function getColor() {
    var colList = ['#7EA404', '#14AFB0','#B05718', '#B0A914', '#B01617','#902BB0', '#B003A2', '#4A429C','#33821E', '#226795', '#D0B600','#886833'];

    var i = Math.floor((Math.random()*colList.length));
  return colList[i];
}
4

1 に答える 1

1

問題は、テキストの上にカーソルを置いているときに常に mouseleave イベントを取得しているとは限らないことです。最も簡単な解決策は、div にパディングを追加して、テキストとコンテナーの端の間にスペースを空けることです。フィドル

于 2012-05-03T15:23:46.630 に答える