Question

我有以下脚本，它会随机分配不同颜色（从数组中）到DIV中的字母，并在悬停时更改这些颜色。当鼠标离开DIV时（即没有悬停时），脚本应该改变颜色。它是在Firefox中这样做的，但在其他浏览器中却没有（Safari，Chrome和IE）。此外，点击功能在这些浏览器中也无法正常工作（同样是在Firefox中）。

您可以在行动here中看到该脚本。

我想知道有人可以帮忙解决这个问题吗？

谢谢，

尼克

$(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];
}

Answer 1

问题似乎是当你将鼠标悬停在文本上时，并不总是拾取mouseleave事件。最简单的解决方案是在div中添加填充，以便在文本和容器边缘之间留出空间。 Fiddle

在悬停时更改文本颜色的脚本适用于Firefox，但不适用于其他浏览器

1 个答案: