Como criar efeito hover

5 participantes

Ir para baixo

Tópico resolvido Como criar efeito hover

Mensagem por loberto 10.11.10 19:54

como eu faço pra imagem mudah qdo eu passo o mouse em cima ?
um cara me deu um código q faz a imagem(as imagem q fica em cima, inicio, portal e etc) do portal muda, + eu qria as outras tb, como eu faço isso ?

o código q ele mandoh é assim:

Código:
#i_icon_mini_portal {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/portal15.png);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_portal:hover {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/portal17.png);
padding: 30px 80px;
background-repeat: no-repeat;
}
loberto
loberto
***

Membro desde : 28/09/2010
Mensagens : 102
Pontos : 191

http://strung-city.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar efeito hover

Mensagem por Needke 10.11.10 20:07

Olá loberto, seja bem-vindo a comunidade Forumeiros!

Poderei criar o código correcto, mas onde deseja aplicar esse efeito?
Será no menú de navegação do fórum?

Att, Needke



Boa noite e Seja bem-vindo ao FdF,

Como você acabou de se inscrever é importante que você esteja informado das nossas regras. Veja aqui alguns links importantes a saber :

Needke
Needke
Hiper Membro

Membro desde : 19/08/2009
Mensagens : 2761
Pontos : 4546

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar efeito hover

Mensagem por Lexus 10.11.10 20:26

Olá loberto,

todos os outros códigos que você quer só mudam a classe, aqui estão eles:
Início:
Código:
#i_icon_mini_index {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/inicio14.png);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_index:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}
FAQ:
Código:
#i_icon_mini_faq {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/faq10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_faq:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}
Buscar:
Código:
#i_icon_mini_search {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/buscar10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_search:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}
Grupos:
Código:
#i_icon_mini_groups {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/grupos10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_groups:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}
Registrar:
Código:
#i_icon_mini_register {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/regist10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_register:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}
Login:
Código:
#i_icon_mini_login {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/login10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_login:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}
Editar Perfil:
Código:
#i_icon_mini_profile {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/bolinh10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_profile:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}
Mensagem Privada:
Código:
#i_icon_mini_message {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/mensag12.png);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_message:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}

Obs: Você deve alterar os links do campo "background-image" das classes ":hover"

Já sabes onde adicionar certo?
Ascenda: Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores :seta2: Aba//Folha de Estilo CSS

Pegue o código, copie e cole na áre do código e depois clique em Validar.

Espero que seja isto o que procuras. Feliz
Até Mais.
Lexus
Lexus
Hiper Membro

Membro desde : 22/06/2010
Mensagens : 4205
Pontos : 5693

http:///.../#

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar efeito hover

Mensagem por loberto 10.11.10 20:40

eu qria coloca pra qdo colocah o mouse a imagem dessa parte mudar ↓↓↓↓
Como criar efeito hover Navega10
como eu faço isso com tds ?
eu só cusigui fazeh com o portal
loberto
loberto
***

Membro desde : 28/09/2010
Mensagens : 102
Pontos : 191

http://strung-city.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar efeito hover

Mensagem por loberto 10.11.10 20:42

é isso msm spoiler, mto obrigado
vou ver se funciona
loberto
loberto
***

Membro desde : 28/09/2010
Mensagens : 102
Pontos : 191

http://strung-city.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar efeito hover

Mensagem por Lexus 10.11.10 21:13

loberto escreveu:é isso msm spoiler, mto obrigado
vou ver se funciona

Não há de que, sempre que posso ajudo. cool
Qualquer problema ou dúvida pode perguntar aqui mesmo. Feliz

Até Mais.
Lexus
Lexus
Hiper Membro

Membro desde : 22/06/2010
Mensagens : 4205
Pontos : 5693

http:///.../#

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar efeito hover

Mensagem por loberto 10.11.10 21:14

só ta faltando o de alguns
calendario, nova mensagem e sair
apenas esses
os q vc mandoh eu cusigui
loberto
loberto
***

Membro desde : 28/09/2010
Mensagens : 102
Pontos : 191

http://strung-city.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar efeito hover

Mensagem por Tsu-kun 10.11.10 21:26

tambem queria saber o resto ^^
Tsu-kun
Tsu-kun
*

Membro desde : 04/09/2009
Mensagens : 48
Pontos : 78

http://www.animedc.org/index.htm?sid=f961a6faf9907c72770fbadfcb8

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar efeito hover

Mensagem por Nicker 10.11.10 21:40

Olá,
Calendário :
Código:
#i_icon_mini_calendar {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/login10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_calendar:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}

Sair :

Código:
#i_icon_mini_logout {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/login10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_logout:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}

Nova mensagem :

Código:
#i_icon_mini_new_message {
background-image: url(http://i60.servimg.com/u/f60/15/70/05/80/login10.png);
padding: 30px 80px;
background-repeat: no-repeat;
}

#i_icon_mini_new_message:hover {
background-image: url(Link da Imagem);
padding: 30px 80px;
background-repeat: no-repeat;
}
Resultou ?
Até mais.
Feliz
Nicker
Nicker
Membro

Membro desde : 04/05/2010
Mensagens : 549
Pontos : 780

http://www.publieiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como criar efeito hover

Mensagem por Tsu-kun 10.11.10 21:46

opa. muito bom
grato cara o/
Tsu-kun
Tsu-kun
*

Membro desde : 04/09/2009
Mensagens : 48
Pontos : 78

http://www.animedc.org/index.htm?sid=f961a6faf9907c72770fbadfcb8

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos