CSS com background-image: característica ou erro?

[Rogerio Pancini 0]

Boa tarde pessoal.

 

Dentre as soluções que consegui para o caso, segue a que usei:

 

Html/Php

 

<div class="menu_icones">

<a href="index.php?st=pg/empresa">

<div class="menu_1"> </div>

</a>

</div>

 

Onde a div em questão é a menu_1:

 

Css

 

.menu_1{

background-image:url(../imagens/menu_empresa.png);

background-repeat:no-repeat;

width:97px;

height: 102px;

}

 

.menu_1:hover{

background-image:url(../imagens/menu_empresa_hover.png);

background-repeat:no-repeat;

}

 

Seguinte:

Funciona, eu queria um hover na imagem o mais simples possível, mas não sei é uma característica dessa solução ou se isso pode ser melhorado.

Na primeira abertura da página (supondo que foi pressionado CTRL+SHIFT+DEL para limpar todos os dados da navegação), ao passar o mouse sobre essa div, a imagem apaga, antes de aparecer a imagem do hover (parece um delay mesmo), não é uma transição instantânea.

Depois do primeiro hover, ai sim a transição é instantânea.

 

A solução que usei para fazer hover com imagem estaria correta ou alguém conhece outra solução?

 

Muito obrigado!

[reebr 94]

Qual é a diferença entre a imagem "menu_empresa.png" e "menu_empresa_hover.png"?

Dependendo, você pode importar somente a primeira imagem e fazer o efeito de hover somente com CSS (sem ter que trocar a imagem).

[Rogerio Pancini 0]

O botão "menu_empresa.png" é cinza (http://www.amorecores.com.br/imagens/menu_empresa.png) e o "menu_empresa_hover.png" é laranja (http://www.amorecores.com.br/imagens/menu_empresa_hover.png), são duas imagens distintas.

Poderia ser. Seria possível fazer algum efeito nesse caso?

 

Grato!

[reebr 94]

Entendi.

 

O que você quer é: sugestões de efeitos?

[Rogerio Pancini 0]

Neste caso nem precisaria de efeitos, eu queria deixar a primeira abertura do site suave (como citado anteriormente, dessa forma, ao passar o mouse, a imagem cinza apaga antes de imagem laranja aparecer).

 

Obrigado!

[reebr 94]

Acho que a propriedade "transition" não funciona quando é alterada a url da imagem. Então, creio que terá que usar animações e mexer com 'opacity' para conseguir o efeito que você quer:

 

http://tableless.com.br/introducao-ao-css-animation/

http://tableless.com.br/css3-animation-keyframe/

 

Exemplo: http://jsfiddle.net/rnxn/A58XF/

[ignoredxyz 17]

É porque a outra imagem do Background não está carregada pelo navegador, considerando que ela não foi chamada (ainda).

 

A melhor opção é você criar uma dupla imagem, você coloca uma ao lado da outra, em uma mesma imagem, e as duas com os mesmos tamanhos da div.

 

Exemplo se vc tem uma div de largura 30px, você criaria uma imagem com 60px de largura, e os 30 primeiros você usaria para imagem normal, e os 30 ultimos, para o hover.

 

Então o CSS ficaria:

.divEscolhida{
    background: url('minhaImagem.png') left center no-repeat;
    height: 50px;
    width: 30px;
}
.divEscolhida:hover{
    background-position: right center;
}

Ou seja, em modo normal, a imagem aparecia so a parta da esquerda, e com o hover so a parte da direita.

[Rogerio Pancini 0]

Obrigado a todos pela ajuda.

A solução do Caio Eduardo é exatamente a que procurava.

 

Muito obrigado!!!