How to create fade and animation hover

I just create a great hover effect for text in Adobe Muse.

See the sample here: http://dash.com.pl/test/test.html

But now I need to gain the same effect of the traditional method by using html/css and js.

I don't know how to get on with it.

Is anyone here, who could help me with this?

Solution

Yes, this is possible using HTML, CSS and JavaScript - with the help of the jQuery library and jQuery UI (which is used for the colour fading effect).

Working example !

Javascript:

var speed = 200;
var line_width = $(".wrapper span").width();
var initial_colour = $(".wrapper span").css("color");

$("span").hover(function() {

    $(this)
        .not(":animated")
        .animate({color:"#0c0"}, speed);

    $(".line", this)
        .not(":animated")
        .animate(
            {
                "width": line_width,
                "background-color":"#0c0"
            },
            speed);

}, function() {

    $(this)
        .not(":animated")
        .animate(
            {
                color:initial_colour
            },
            speed);

    $(".line", this)
    .not(":animated")
    .animate(
        {
            "width":"0px",
            "background-color":initial_colour
        },
        speed);

});