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

现在，我自己努力尝试并且四处搜寻而未找到任何答案之后，我的大脑开始疼痛。
我问你。

我正在尝试更改<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"
}

最佳答案

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

该行仅将元素的文本放入字符串中。因此，此后的代码（如果它可以工作的话）仅适用于内存中的字符串，并且在您的浏览器中不可见。

要使此工作有效，您必须手工完成：在每个字母周围添加一个跨度，并为每个跨度赋予不同的颜色。

您可以使用以下HTML进行此操作：;）

<h6>Hello world</h6>

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

// 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/

关于javascript - 悬停时在html文本中一一更改字母的颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23455798/