Como criar o efeito hover no estilo inline do CSS
- Detalhes
- Angelo Luis Ferreira
- CSS
- Acessos: 3494
Objetivo
Embora o uso de estilos inline no CSS não seja a prática mais recomendada para a criação de efeitos, é possível utilizar essa abordagem para adicionar o efeito hover em links diretamente no HTML, de forma rápida e simples. Neste artigo, mostraremos como criar o efeito hover no estilo inline do CSS com o auxílio de eventos do JavaScript, apresentando exemplo prático e dicas úteis para implementação.
Mesmo que essa não seja a forma mais ideal de trabalhar com CSS, entender como criar o efeito hover no estilo inline pode ser útil e obrigatório em determinadas situações. Continue lendo para descobrir como aplicar esse efeito em seus links usando CSS inline.
Observações:
É importante observar que :hover é um pseudo-seletor do CSS e só faz sentido se estiver dentro dos estilos CSS externos ou internos, ou seja, separado do HTML. Embora não exista um equivalente no estilo inline, podemos criar um efeito semelhante usando eventos do JavaScript.
Não há nada de errado em utilizar estilos inline, mas o programador deve considerar as vantagens e desvantagens ao optar por esta forma. Em certos casos específicos, quando você não tem acesso aos arquivos CSS, precisa fazer apenas testes, ou precisa aplicar estilos para um elemento único, por exemplo, pode ser mais vantajoso utilizar o estilo inline.
Veja a seguir as vantagens e desvantagens em se utilizar CSS inline:
a. Vantagens: fácil de utilizar; pode ser utilizado em páginas que você não tem acesso aos arquivos CSS; é obrigatório algumas vezes em processos assíncrono do JavaScript.
b. Desvantagens: baixa produtividade, pois é necessário estilizar cada linha de código; elimina a possibilidade de reutilização do código - princípio DRY (Don't Repeat Yourself); desorganização e inelegibilidade; dificuldade na manutenção; impacto no desempenho da página.
Exemplos com os 3 tipos de estilos CSS: interno, externo e inline
Abaixo, vamos apresentar as 3 maneiras que podemos criar o efeito hover em um link HTML:
- CSS interno
- CSS externo
- CSS inline (usando eventos)
1. Efeito "hover" no estilo CSS interno (usando o pseudo seletor :hover)
1.1. Nesse exemplo utilizaremos o estilo CSS interno e o pseudo seletor :hover.
1.1.1. No estilo CSS interno, o código CSS deverá estar entre as tags HTML <style> .... </style> na seção <head> do documento HTML. Veja o exemplo abaixo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
a {
color: #0000ff;
}
a:hover {
color: #ff0000;
}
</style>
</head>
<body>
<h1>Efeito hover - estilo CSS interno</h1>
<a href="#">Passe o mouse sobre esse texto</a>
</body>
</html>1.2. Veja o exemplo do efeito hover no CodePen Editor usando o estilo CSS interno:
See the Pen Efeito hover - estilo CSS interno by Angelo Luis Ferreira (@angeloalf) on CodePen.
2. Efeito "hover" no estilo CSS externo (usando o pseudo seletor :hover)
2.1. Nesse exemplo utilizaremos o estilo CSS externo e o pseudo seletor :hover.
2.1.1. Observe que no estilo CSS externo, o código CSS deverá estar inserido em um arquivo separado do arquivo que contém o código HTML. Entretanto, o arquivo CSS deverá estar vinculado aos documentos HTML.
Obs.: Para vincular o arquivo CSS, utilize a linha de código abaixo, dentro das tags <head> ... </head>. Substitua stylesheet.css pelo arquivo CSS que se deseja vincular.
<link rel="stylesheet" type="text/css" href="/stylesheet.css" />2.1.2. Veja o exemplo abaixo:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/stylesheet.css" />
</head>
<body>
<h1>Efeito hover - estilo CSS interno</h1>
<a href="#">Passe o mouse sobre esse texto</a>
</body>
</html>
CSS
a {
color: #0000ff;
}
a:hover {
color: #ff0000;
} 
Veja o exemplo do efeito hover no editor CodePen usando o estilo CSS externo:
See the Pen Efeito hover - estilo CSS externo by Angelo Luis Ferreira (@angeloalf) on CodePen.
3. Efeito hover criado no CSS inline (usando eventos JavaScript)
3.1. Neste exemplo a seguir, vamos criar o efeito hover utilizando o estilo CSS inline. Como ainda não existe nada equivalente para substituir ao pseudo seletor :hover no estilo CSS inline, precisaremos lançar mão dos atributos de evento onmouseover e onmouseout.
3.1.1. No estilo CSS inline, o código CSS fica inserido diretamente em cada elemento HTML. Para isso, é necessário adicionar o atributo style para cada tag HTML, sem usar os seletores.
3.1.2. Para criar o efeito hover no CSS inline, precisamos usar também os atributos onmouseover e onmouseout, onde podemos adicionar os códigos JavaScript para alterar a cor do próprio elemento HTML, que no caso é a tag âncora <a>texto</a>, quando passamos o cursor do mouse sobre o texto ou quando retiramos o cursor sobre o texto (ou sobre uma imagem também).
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Efeito hover - estilo CSS inline</h1>
<a href="#"
style="color:#0000FF;"
onmouseover="this.style.color='#FF0000'"
onmouseout="this.style.color='#0000FF'">
Passe o mouse sobre esse texto
</a>
</body>
</html>
Veja o exemplo do efeito hover no edito CodePen usando o estilo CSS inline:
See the Pen Efeito Hover - estilo CSS inline by Angelo Luis Ferreira (@angeloalf) on CodePen.
Explicando o código:
3.1.3. Primeiro definimos a cor do texto do link para azul, usando o CSS inline (style="color:#0000FF;" )
3.1.4. Utilizando o atributo de evento onmouseover podemos definir uma ação ao passarmos o cursor mouse sobre o texto da tag âncora <a></a>.
3.1.4.1. Para criar a ação do evento, utilizamos o código JavaScript: this.style.color='#FF0000'
3.1.4.2. Esta ação fará com que a cor azul mude para vermelho ao passarmos o cursor do mouse sobre o texto. Observe que usamos o this para alterar a cor do próprio elemento que gerou a ação.
3.1.5. Usamos agora o atributo onmouseout para definir a ação para quando retirarmos o cursor sobre o texto da tag <a></a>.
3.1.5.1. Como no atributo anterior, usamos a linguagem JavaScript para alterar a cor do texto da própria tag, voltando de vermelho para azul.
3.2. No próximo exemplo vamos utilizar o efeito hover em um link sem definir a cor do texto, mantendo-se a cor padrão.
<h1>Efeito hover - estilo CSS inline</h1>
<a href="#"
onmouseover="this.style.color='#FF0000'"
onmouseout="this.style.color=null">
Passe o mouse sobre esse texto
</a>
Veja o exemplo do efeito hover no edito CodePen usando o estilo CSS inline:
See the Pen Efeito Hover - CSS inline 2 by Angelo Luis Ferreira (@angeloalf) on CodePen.
Explicando o código:
3.2.1. Neste exemplo não precisamos definir a cor do texto. Vamos manter a cor padrão do link utilizado no documento HTML.
3.2.2. Utilizando o atributo de evento onmouseover podemos definir uma ação ao passarmos o cursor mouse sobre o texto da tag âncora <a></a>.
3.2.2.1. Para criar a ação do evento, utilizamos o código JavaScript: this.style.color='#FF0000'
3.2.2.2. Esta ação fará com que a cor padrão da página mude para vermelho ao passarmos o cursor do mouse sobre o texto. Observe que usamos o this para alterar a cor do próprio elemento que gerou a ação.
3.3.3. Usamos agora o atributo onmouseout para definir a ação para quando retirarmos o cursor sobre o texto da tag <a></a>.
3.3.3.1. Para voltarmos à cor padrão, vamos usar a expressão: onmouseout="this.style.color=null", onde atribuímos null para para a propriedade color.
Tente você mesmo
Veja no nosso editor HTML - Squids Editor - como criamos o efeito hover no estilo CSS inline. No editor, altere os códigos da forma que você desejar até conseguir o efeito desejado. Depois é só copiar os códigos e colar no seu projeto. Clique no link abaixo para abrir nosso editor de testes. (Não esqueça de clicar no botão "Executar" para visualizar os resultados).
CÓDIGO COMPLETO DO EXEMPLO
Para copiar e colar nos seus projetos.
HTML
<h1>Efeito hover - estilo CSS inline</h1>
<a href="#"
onmouseover="this.style.color='#FF0000'"
onmouseout="this.style.color=null">
Passe o mouse sobre esse texto
</a>Dica para aprender mais
DICA: Aprenda a ser um programador mais do que completo (Pacote Full Stack)
Documentação Oficial
1. [Documentação MDN Web Docs - mouseover (event)] » Sobre o atributo onmouseover.
2. [Documentação MDN Web Docs - mouseout (event)] » Sobre o atributo onmouseout.
