Background acima de <img>

[Eduardo Kalsing 0]

Bom dia galera!

 

Estou com o seguinte problema:

eu tenho uma imagem (dentro de uma tag <img> obviamente) e quero que, quando passe o mouse por cima, traga uma outra imagem por cima dessa.

 

Com a propriedade :hover, isso não está acontecendo.

 

Agradeço!

[Rodrigo Knx 2]

Pode ter outras soluções, mas tenta aplica um onmouseover="" dentro da tag <img>:

 

<img src="" onmouseover="Coloque o que quer que apareça" />

[FK. 0]

Rodrigo, é melhor assim:

 

<img src="imagemAtual.png" onmouseover="this.src='imagemHover.png';" onmouseout="this.src='imagemAtual.png;'" />

 

No entanto, essa forma de escrever JavaScript (inline), não é muito recomendada.

[Thiago Vianna /+/ 7]

CSS:

a.srollover {
   display: block;
   width: 22px;
   height: 22px;
   background: url("pbox_close.gif") 0 0 no-repeat;
   text-decoration: none;
}

a:hover.srollover {
   background-position: -22px 0;
}

 

HTML:

<a class="srollover" href="#"> </a>

 

IMAGEM usada no exemplo:

http://www.pinceladasdaweb.com.br/blog/2007/03/19/simples-rollover-em-imagens-com-css/