Como criar efeito hover

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Como criar efeito hover

Mensagem por loberto em 10/11/10, 05:54 pm

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;
}
avatar

loberto
Nível 8

Masculino
Inscrito dia : 28/09/2010
Mensagens : 102
Pontos Ativos : 191

Ver perfil do usuário http://strung-city.forumeiros.com/

Resolvido Re: Como criar efeito hover

Mensagem por Needke em 10/11/10, 06:07 pm

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 :

avatar

Needke
Usuário experiente

Masculino
Inscrito dia : 19/08/2009
Mensagens : 2761
Pontos Ativos : 4546

Ver perfil do usuário

Resolvido Re: Como criar efeito hover

Mensagem por Lexus em 10/11/10, 06:26 pm

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.
avatar

Lexus
Super usuário

Masculino
Inscrito dia : 22/06/2010
Mensagens : 4205
Pontos Ativos : 5692

Ver perfil do usuário http:///.../#

Resolvido Re: Como criar efeito hover

Mensagem por loberto em 10/11/10, 06:40 pm

eu qria coloca pra qdo colocah o mouse a imagem dessa parte mudar ↓↓↓↓

como eu faço isso com tds ?
eu só cusigui fazeh com o portal
avatar

loberto
Nível 8

Masculino
Inscrito dia : 28/09/2010
Mensagens : 102
Pontos Ativos : 191

Ver perfil do usuário http://strung-city.forumeiros.com/

Resolvido Re: Como criar efeito hover

Mensagem por loberto em 10/11/10, 06:42 pm

é isso msm spoiler, mto obrigado
vou ver se funciona
avatar

loberto
Nível 8

Masculino
Inscrito dia : 28/09/2010
Mensagens : 102
Pontos Ativos : 191

Ver perfil do usuário http://strung-city.forumeiros.com/

Resolvido Re: Como criar efeito hover

Mensagem por Lexus em 10/11/10, 07:13 pm

@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.
avatar

Lexus
Super usuário

Masculino
Inscrito dia : 22/06/2010
Mensagens : 4205
Pontos Ativos : 5692

Ver perfil do usuário http:///.../#

Resolvido Re: Como criar efeito hover

Mensagem por loberto em 10/11/10, 07:14 pm

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

loberto
Nível 8

Masculino
Inscrito dia : 28/09/2010
Mensagens : 102
Pontos Ativos : 191

Ver perfil do usuário http://strung-city.forumeiros.com/

Resolvido Re: Como criar efeito hover

Mensagem por Tsu-kun em 10/11/10, 07:26 pm

tambem queria saber o resto ^^
avatar

Tsu-kun
Nível 5

Masculino
Inscrito dia : 03/09/2009
Mensagens : 48
Pontos Ativos : 78

Ver perfil do usuário http://www.animedc.org/index.htm?sid=f961a6faf9907c72770fbadfcb8

Resolvido Re: Como criar efeito hover

Mensagem por Nicker em 10/11/10, 07:40 pm

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
avatar

Nicker
Usuário destaque

Masculino
Inscrito dia : 04/05/2010
Mensagens : 549
Pontos Ativos : 780

Ver perfil do usuário http://www.publieiros.com/

Resolvido Re: Como criar efeito hover

Mensagem por Tsu-kun em 10/11/10, 07:46 pm

opa. muito bom
grato cara o/
avatar

Tsu-kun
Nível 5

Masculino
Inscrito dia : 03/09/2009
Mensagens : 48
Pontos Ativos : 78

Ver perfil do usuário http://www.animedc.org/index.htm?sid=f961a6faf9907c72770fbadfcb8

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum