CSS3 Hover, Focus and Active AttributesLets break this one down. The hover attribute should be self-explanatory in that this effect will take place when the visitor hovers their mouse over the text.The focus attribute is a little less clear here. W3Schools.com defines it as follows, "the :focus selector is allowed on elements that accept keyboard events or other user inputs." However, the demo associated with the code does not use events or other user inputs. So, you can most likely do away with it. However, it appears that you can use it if needed.The :active attribute is more necessary here in that it is used to select and style the active link. This code is based on making links glow in a very cool way, and thus the :active attribute is necessary.The -webkit-stroke- part of the code is new to me. In this code example, it is used for width, color and fill. You can use it to set the color and width of the text's outline.Most people are probably more familiar with the transition attributes, especially if you are a regular reader of HTMLgoodies. The transition does exactly as it states: it sets the amount of time it takes for the transition (the glow effect) to happen. In this case, its .3 seconds. So, its very quick.CSS3 Link AttributesThats the first half of the code. The second half defines the link attributes like this: .text-glow a { -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; color:white; }Again, this code mostly uses the transition effect, which is very popular with CSS3 designers.To implement this effect on your page, simply set the div class and add an href tag around the text that you want to link and glow.

This Text Glows In Mouse Over