CODEWITHSUNDEEP
javascriptjqueryhtmlcssfor-loop
Mahitchima
Mahitchima

Reputation: 21

Changing color of letters one by one in a html text when hovering

Now that my brain aches after trying by myself and searching all over without finding any answer. i ask you.

I am trying to change the colors of the single letters in a text which is contained inside a <h5>Hello</h5> When the pointer is hovering over each single one, I can manage this by spamming alot of <span></span> and put letter by letter inside each <span></span>, then using CSS to just change color when hovering.

BUT

I want to do this by using Javascript. Here i've accomplished extracting every single letter in a <h5>, but I am not getting them to change color when I hover each one of them.

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

});

So with the great help of GolezTrol i achieved victory doing what i wanted to do! Though i use Css instead of the javascript to handle the hover =)

result - java - syntax:

$(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"
}

Upvotes: 1

Views: 2938

Answers (1)

GolezTrol
GolezTrol

Reputation: 116160

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

That line just gets the text of the element into a string. So the code after that, if it would work at all, just works on the in-memory string and won't be visible in your browser.

To make this work, you will have to do the same you did by hand: add a span around each of the letters and give each span a different color.

You can do this with the following HTML: ;)

<h6>Hello world</h6>

Javascript to embed all letters in a span inside every h6 in the document.

// 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 to handle the hover: Of course you can do this by simply declaring CSS as well if you are just toggling colors, but if you want to have more complex effects or random colors, this might be your Javascript solution:

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

Upvotes: 1

Related Questions