javascript - 悬停时在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 fiddle :

http://jsfiddle.net/KdzQ7/