Ir para conteúdo

POWERED BY:

Arquivado

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

emersoncoder

IMG:HOVER não funciona background-img

Por , em Desenvolvimento frontend

Recommended Posts

emersoncoder    0

emersoncoder
Postado

Preciso que ao passar o mouse, mude a imagem do link.

 

estou utilizando : 

<html>
<head>
<style>

.img1:hover{ background-image:url(2.jpg); height:100px; width:100px;}
</style>
<title>CSS Rollover</title>
</head>
<body><a href="#">
<img src="1.jpg" class="img1" width="150" height="150"></a>
</body>
</html>

porém, apenas muda as medidas que estipulei, width e height...

 

mas o backgroud-image não funciona... nao aparece a 2.jpg, só fica na 1.jpg.

 

como faço para alterar a imagem e funcionar esse css ?

 

vlw abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Malan Dev    1

Malan Dev
Postado

Facil parceiro

 

crie uma div com o tamanho da imagem e coloque a imagem como backgorund aplique o Hover no background da imagem assim ele vai trocar somente o background coloque um cursor no hover tbm para aparecer como se fosse link isso resolve seu problema

 


<html>
<head>
<style>
.img { background:url(1.jpg); height:100px; width:100px; }
.img:hover{ background-image:url(2.jpg); height:100px; width:100px; cursor:pointer;}

</style>
<title>CSS Rollover</title>
</head>
<body>
<a href="#">
<div class="img"> </div>
</a>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Facil parceiro

 

crie uma div com o tamanho da imagem e coloque a imagem como backgorund aplique o Hover no background da imagem assim ele vai trocar somente o background coloque um cursor no hover tbm para aparecer como se fosse link isso resolve seu problema

 


<html>
<head>
<style>
.img { background:url(1.jpg); height:100px; width:100px; }
.img:hover{ background-image:url(2.jpg); height:100px; width:100px; cursor:pointer;}

</style>
<title>CSS Rollover</title>
</head>
<body>
<a href="#">
<div class="img"> </div>
</a>
</body>
</html>

 

Não se coloca <div> dentro de <a>

 

 

Basta definir os <a> como block|inline-block e formatar:

 

a {

   background: url('1.jpg') top left no-repeat fixed;

   display: block;

   height: 200px;

   width: 200px;

}




a:hover {

   background-image: url('2.jpg');

}

 

 

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