How can i make text glow on mouseover of another element (Without text-shadow)

Question

Say for example I have the following code:

HTML:

<ul>
    <li>
        <a>
            <span class="title">Home</span>
            <span class="description">My House</span>
        </a>
    </li>
    <li>
        <a>
            <span class="title">About</span>
            <span class="description">Foo</span>
        </a>
    </li>
</ul>

How can i make ONLY the title class glow, as in an outer glow effect when the li element is hovered over.

I found this plugin: http://nakajima.github.com/jquery-glow/, but i cant figure out how to make it work to my needs. EDIT: It isn't really what i'm looking for as it relies on text-shadow.

I wanted this to work in ie7+ therefore i can't really use text shadow.<

Answer 1

The bit of that code (the link you posted) that you're interested in is this:

$(this).animate({
        color: TO_GLOW_TEXT_COLOR,
        textShadow: {
          begin: true,
          color: TO_GLOW_HALO_COLOR,
          radius: GLOW_RADIUS
        }
      }, DURATION);

That makes the text glow. (change the uppercase bits). And this makes it fade again:

$(this).animate({
        color: ORIGINAL_COLOR,
        textShadow: {
          begin: false,
          color: TO_GLOW_HALO_COLOR,
          radius: GLOW_RADIUS
        }
      }, DURATION);

So you can just do a normal hover() on those links now you know the secret: (this will test for a hover on the a element and ONLY glow the span.title element).

$('ul li a').hover(function(){
    $(this).find('span.title').animate({.....}); // fade in
},
function(){
    $(this).find('span.title').animate({.....}); // fade out
});

The problem - all its doing is setting the textShadow using jquery instead of CSS, so therefore this won't work in IE7 if textShadow doesn't work.

PS: the link you posted doesnt work in firefox either - unless my firefox is broken.