Glowing text on hover

Question

I am trying to make a glowing text menu in jQuery and after a lot of hard work it's still not working. I don't know where my mistake is... Could anyone help me?

HTML:

<div id="list">
    <div class="glow Text">HOME</div>
    <div class="glow Text">CONTACT</div>
    <div class="glow Text">PRODUCTS</div>
    <div class="glow Text">SERVICES</div>
    <div class="glow Text">BLOG</div>
</div>

CSS:

body{
    background:#000
}
#list .glow{
    text-shadow: #CCC 0px 0px 0px;
    position:relative;
    color: #CCC;
    font-size: 28px;
    margin: 0px;
    padding: 0px;
    line-height: 26px;
    font-family: Arial Narrow;
}
#list .active{
    position:relative;
    color: #FFF;
    font-size: 28px;
    margin: 0px;
    padding: 0px;
    line-height: 26px;
    font-family: Arial Narrow;
}

jQuery:

jQuery(document).ready(function() {
    jQuery('.glow').glow();
})

Answer 1

I'm not sure what your jQuery is doing. But I can see the CSS is wrong. Your .glow class has:

text-shadow: #CCC 0px 0px 0px;

This means: draw a shadow of color #CCC with (0px, 0px) offset and 0px blur radius.

Since the shadow is drawn without offset and without blur, the shadow is drawn exactly at the same place of the normal text.

To fix this, either add a blur radius (makes it glow-y)

text-shadow: #CCC 0px 0px 4px;

or a shadow offset (less glow-y):

text-shadow: #CCC 2px 4px 0px;