Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

lu!3

Link com imagem, que muda quando passar o mouse

Por , em Desenvolvimento frontend

Recommended Posts

lu!3    0

lu!3
Postado

Eu pesquisei bastante e não encontrei como eu faço com CSS, link com imagem que mude a imagem ao passar o mouse. Semelhante a desse site: http://www.roupasbebes.com.br/.

Eu já tentei com background, a.houve, e Etc. mas a imagem não aparece ou só aparece em parte.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ricardo Barantini    33

Ricardo Barantini
Postado

É só você usar o :hover do CSS, por exemplo.

 

a {
    background:url('endereco-da-imagem.jpg');
}

a:hover {
    background:url('endereco-da-imagem-sobreposta.jpg');
}

 

E no seu HTML você chama o <a href="#"></a> normal.

Compartilhar este post

Link para o post
Compartilhar em outros sites

lu!3    0

lu!3
Postado

Obrigado pela resposta de todos especialmente de ricardobarantini.

Hoje eu parei com calma para pesquisar e consegui. Segue o codigo!

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
.header {
	width:200px;
	height:100px;
    border:1px solid red;
}

.header a {
     display: block; /* nao delata se deletar nao funciona. Nao sei por que */
    background-image: url("http://www.lanceuniconacional.com.br/img/botao_comprar.gif");
    background-repeat: no-repeat;
    height:100px; /* pessoal do forum nao delata a largura e altura */
    width:200px; /* pessoal do forum nao delata a largura e altura */
    color: #eaeaea;
}

.header a:hover {
    display: block; /* nao delata se deletar nao funciona. Nao sei por que */
    background-image: url("http://www.manchinhaot.com.br/comprar.jpg");
    background-repeat: no-repeat;
    height:100px; /* pessoal do forum nao delata a largura e altura */
    width:200px; /* pessoal do forum nao delata a largura e altura */
}
</style>

</head>

<body>

<div class="header">
    <a href="#">
    </a>
</div>

</body>
</html>

Eu sou totalmente amador nunca fiz curso, mas eu acho que isso funcione com todos os navegadores!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito