A realização de um roll-over é uma tarefa comum em design de interfaces de usuário e websites. Consiste em fazer 💸 com que um elemento gráfico mude de aparência ou exiba informações adicionais quando o ponteiro do mouse é passado por 💸 cima dele.
Para cumprir isso, é necessário usar CSS (Cascading Style Sheets) para estilizar o elemento e JavaScript para detectar o 💸 evento do mouse. Abaixo, você encontrará as etapas básicas para criar um roll-over funcional:
1. Crie o elemento HTML que deseja 💸 estilizar, por exemplo:
```html
Clique aqui
```
2. Adicione um estilo para o elemento no seu arquivo CSS. Este será o design padrão, exibido 💸 antes do roll-over:
```css
#meuBotao {
width: 200px;
height: 50px;
color: white;
background-color: blue;
border: none;
}
```
3. Adicione um estilo para o elemento quando o mouse passar por 💸 cima dele:
```css
#meuBotao:hover {
background-color: red;
cursor: pointer;
}
```
Neste exemplo, o fundo do botão muda de azul para vermelho e o cursor do mouse 💸 muda para a seta de "clique" quando o ponteiro do mouse está sobre o botão.
4. Para exibir informações adicionais, é 💸 possível utilizar JavaScript. Primeiro, crie um elemento HTML para exibir as informações:
```html
Esse é o conteúdo adicional do roll-over.
```
5. Em seguida, 💸 adicione JavaScript para exibir as informações quando o mouse passar por cima do elemento:
```javascript
const botao = document.getElementById("meuBotao");
const informacoes = document.getElementById("informacoesAdicionais");
botao.addEventListener("mouseover", 💸 function() {
informacoes.hidden = false;
});
botao.addEventListener("mouseout", function() {
informacoes.hidden = true;
});
```
Neste exemplo, o conteúdo do elemento "informacoesAdicionais" será exibido quando o mouse passar 💸 por cima do botão e escondido quando o mouse sair do botão.