O css é um permite utilizar grandes truques para mudar o estilo de um elemento quando o usuário move o curso do mouse sobre este.
Para mudar o estilo de um elemento ao passar o mouse sobre o mesmo, você precisará utilizar o pseudo elemento: hover;
Evento CSS Hover
Usando: hover, podemos mudar para usar este estilo on mouse over. Isto é usado geralmente para exibir um sublinhado no texto link.
|
1
2
3
4
5
6
7
|
a{ text-decoration:none;}a:hover{ text-decoration:underline;} |
|
1
|
<a href="#">Link Text</a> |
|
1
2
3
4
5
6
7
8
9
|
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;} |
Esta funcionalidade já existe a muito tempo, porém com a introdução do CSS3 permitiram que designers utilizassem fortemente estes recursos.
O evento HOVER do CSS
Iremos adicionar o estilo para o evento hover quando passar o mouse sobre o link
|
1
2
3
4
5
6
7
8
9
10
|
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 */} |
Fonte: http://www.paulund.co.uk/how-to-create-a-pure-css-glow-text-on-hover

