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

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开发者_StackOverflow社区 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.<

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.

$("li").hover(function()
{
    //mouse over
    var s = $(this).children("a").children("span");

    for(element in s)
    {
        if(element.hasClass("title"))
        {
            //add glow to element
        }
    }
},
function()
{
    //remove glow here in a similar way
});

Also note that if your markup is consistent then you can just select the first element instead of looping through them all so you would simply add the glow to s[0]

I think find maybe even more suited for your purpose instead of chaining the children() calls. http://api.jquery.com/find/

Are you asking "How do I make things glow?" or are you asking "How do I target the glow to the element I want?"

If you want the latter I'd do it this way:

$(document).ready(function(){
        $('li').hover(
            function(){
                $(this).find('.title').addClass('glow');
            },function(){
                $(this).find('.title').removeClass('glow');
            }
        );
});

Presuming that adding the "glow" class is sufficient to make the title element glow.