sobreposições de imagem são ferramentas úteis para ajudar os seus usuários finais monitorar o seu mouse em sua página web. A designer website , muitas vezes, pegar um monte de informações detalhadas em uma página, e o usuário final terá uma fila visual que seu rato tem rolado something.There duas maneiras básicas para criar um capotamento. Você pode usar a linguagem de script do lado do cliente JavaScript chamado para realizar a tarefa , ou você pode usar Cascading Style Sheets (CSS) para realizar a tarefa. Este artigo aborda o método de Cascading Style Sheets . Criando o texto Rollover

Crie um documento XHTML genérico em seu editor de texto , como visto na imagem .

* Incluir o DOCTYPE Transitional e suas tags de codificação. * Incluir as tags de título entre . os tags de cabeça * Incluir as marcas de estilo entre as tags de cabeça

entre as tags body , digite as seguintes palavras : .

Este é um texto rollover

Coloque isso. frase com o período de início e fim marcas , como mostrado. Dentro da começando a tag span , digite:

class = " rollover "

Envie seu documento para o servidor Web
Criando as Regras de Estilo
< . br>

Digite o seguinte, entre as marcas de estilo na parte superior do seu documento:

span.rollover {background -color : white ;} útil: hover.rollover {background -color: amarelo; cor : marrom ;}

primeiro, crie a instrução rollover espaço para a folha de estilo. Digite " espaço ", então um período , então " rollover ", onde rollover corresponde ao atributo classe que foi dado para a tag span. Isto indica que o fundo entre as tags de span é branco, que se parece com uma cor de fundo em branco para o usuário final .

Seguida, crie o espaço , além de um cólon , além de um período , além de capotamento , o que é a classe da tag span. A instrução pairar significa " Quando você coloca o ponteiro do mouse sobre o texto dentro da tag span , siga estas instruções . " Quando o usuário final coloca o mouse sobre o texto , o fundo fica amarelo eo texto torna marrom.
Criando um Botão de Rolagem

Há uma maneira relativamente fácil criar um botão de bom olhar para fora do texto em sua página web. Basta adicionar os seguintes atributos para a instrução span.rollover :

background-color : navy ; margem: início branco 5px ; font-family : Georgia ; font-size: 14pt ; color: white ;

Em primeiro lugar, mudar a cor do fundo do branco ao azul marinho. Em seguida, adicione a instrução fronteira , que tem três partes: o border-width , o cor- de fronteiras e os atributos de estilo fronteira. Nós escolhemos a 5 pixels, branco, beira início, o que significa que há uma caixa branca, retangular fronteira com o conteúdo da tag span que é de 5 pixels de espessura.

Mude a família de fontes para a Geórgia em 14 pt . Finalmente, mudar a cor da fonte para branco , por isso mostra -se contra o fundo da marinha . Envie o documento para o servidor Web e testá-lo .
Antes do Rollover

Este é um instantâneo da página Web antes de você colocar o ponteiro do mouse sobre o texto . O texto é branco, eo fundo é azul-marinho.
Após o Rollover

Este é um instantâneo da página da Web , enquanto o ponteiro do mouse está sobre o botão . O fundo é amarelo, eo texto é marrom.