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

The problem seems to be that it's not always picking up the mouseleave event when you're hovering over text. The simplest solution is to add padding to the div so that there is space between the text and the edge of the container. Fiddle

于 2012-05-03T15:23:46.630 回答