Question

现在，在我自己尝试并在没有找到任何答案的情况下进行搜索之后，我的大脑疼痛了。我问你。

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

BUT

我想通过使用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来处理hover =）

结果 - 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将所有字母嵌入文档中每个span的{{1}}内。

h6

用于处理悬停的Javascript：当然，你可以通过简单地声明CSS来做到这一点，如果你只是切换颜色，但如果你想要更复杂的效果或随机颜色，这可能是你的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);
    });
});

JS小提琴：

http://jsfiddle.net/KdzQ7/

悬停时，在html文本中逐个更改字母的颜色

1 个答案: