CSS has a good trick which allows you to change the style of an element when the visitors mouse moves over the element.
To change the style of an element on mouse over you need to use the pseudo :hover.
CSS Hover Event
Using :hover will then switch to use this style on mouse over. This is commonly used to display a underline on link text.
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}This functionality has been around for along time, but since the introduction to CSS3 is allows web designers to come up with much more inventive ways of using hover events.
Steps To Make The Text Glow
In the below code I am going to walk you through the process of using :hover to create a faded glowing effect on your links.
The HTML For Links
First the HTML which is a basic html anchor tag with text inside it.
<a href="#">Link Text</a>The CSS For Links
First we style the standard links
a{
font-size:16px;
color:#FFF;
-webkit-transition: all 0.3s ease-in; /*Safari & Chrome*/
transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in; /* Firefox 4 */
-o-transition: all 0.3s ease-in; /* Opera */
text-decoration:none;
}The CSS Hover Event
Now we add the styling when we hover over the link.
a:hover{
-webkit-stroke-width: 5.3px;
-webkit-stroke-color: #FFFFFF;
-webkit-fill-color: #FFFFFF;
text-shadow: 1px 0px 20px yellow;
-webkit-transition: width 0.3s; /*Safari & Chrome*/
transition: width 0.3s;
-moz-transition: width 0.3s; /* Firefox 4 */
-o-transition: width 0.3s; /* Opera */
}