悬停时在html文本中一一更改字母的颜色

Question

现在我自己尝试了一遍又一遍没有找到任何答案，我的大脑很痛。 我问你。

我正在尝试更改包含在 <h5>Hello</h5> 中的文本中单个字母的颜色当指针悬停在每个单个字母上时，我可以通过发送大量 <span></span> 的垃圾邮件并将字母按每个<span></span> 中的字母，然后在悬停时使用 CSS 更改颜色。

但是

我想通过使用 Javascript 来做到这一点。 在这里，我已经完成了提取 <h5> 中的每一个字母，但是当我将它们中的每一个悬停时，我并没有让它们改变颜色。

$('h6').ready(
    function () {
        var T = $('h6').text();
            for (letters in T) {
                $(T[letters]).hover(
                    function () {
                        $(T[letters]).toggle("color", "red");
                    })
             }

});

所以在 GolezTrol 的大力帮助下，我完成了我想做的事情！ 虽然我使用 Css 而不是 javascript 来处理悬停 =)

结果 - java - 语法：

$(function () {
    $('h2').each(
    function () {
        //Extract text from html, and attach it to "Txt" variable.
        var Txt = $(this).text();
        //Empty var-string waiting for loop.
        var Gtxt = '';
        //Loop through text to add <span id="green> on every letter.
        for (i in Txt) {
            //add letter by letter to Gtxt ( <span id="green"> letter </span> )
            Gtxt = (Gtxt + '<span id="green">' + Txt[i] + '</span>');

            //IF for Newline on period.
            if (Txt[i] == '.') {
                Gtxt = (Gtxt + '<br>');
            }
        }
        //Add processed text to Html $('h2')
        $(this).html(Gtxt);
    });
});

CSS：

#green{
    color: "color"
}

#green:hover{
    color: "green"
}

Answer 1

var T = $('h6').text();

该行只是将元素的文本转换为字符串。所以之后的代码，如果它可以工作的话，只会在内存中的字符串上工作，并且不会在你的浏览器中可见。

要完成这项工作，您必须手动执行相同的操作：在每个字母周围添加一个跨度，并为每个跨度赋予不同的颜色。

您可以使用以下 HTML 来做到这一点：;)

<h6>Hello world</h6>

Javascript 将所有字母嵌入到文档中每个 h6 中的 span。

// Function that embeds each letter with a span. Maybe this can be done 
// simpler, but it works.
$(function()
{
  $('h6').each(function(){
      var txt = $(this).text();
      var html = '';
      for (t in txt)
      {
          html = html + '<span>' + txt[t] + '</span>';
      }
      // Put the generated HTML back in the document.
      $(this).html(html);
    });
});

处理悬停的Javascript： 当然，如果您只是切换颜色，您也可以通过简单地声明 CSS 来做到这一点，但如果您想要更复杂的效果或随机颜色，这可能是您的 Javascript 解决方案：

// Attaches hover events to each span within a h6. Using document.on, this 
// event will work for any span this is or will be in the document.
$(document).on('hover', 'h6 span', function(event){
    // 'hover' is a shorthand. The event is linked to mouseenter and mouseleave, so 
    // you'll have to check event.type to see which one it is.
    if (event.type == 'mouseenter')
        $(this).css('color', 'red');
    else
        $(this).css('color', 'blue');
});

JS 小提琴：

http://jsfiddle.net/KdzQ7/