Efeito ao passar mouse no nome do usuario

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

Resolvido Efeito ao passar mouse no nome do usuario

Mensagem por TappedOut em 30/05/14, 08:59 pm

  • Descrição:
queria que aparecesse isto:

Encontrado em: http://suportedesign.forumeiros.com/forum

  • Informações:
Fórum:http://gta-beta2014.forumeiros.com/Versão:PHPBB3
Tipo:Pedido de códigoTags:Efeito,passar,mouse,usuario



Última edição por Mergulhador_. em 31/05/14, 01:53 pm, editado 1 vez(es)
avatar

TappedOut
Usuário destaque

Masculino
Inscrito dia : 07/05/2014
Mensagens : 545
Pontos Ativos : 756

Ver perfil do usuário http://www.gtav-curiosidades.forumeiros.com

Resolvido Re: Efeito ao passar mouse no nome do usuario

Mensagem por Shek em 30/05/14, 09:57 pm

Olá!

Adicione este código jQuery em Módulos > HTML e JS > Criar um novo Javascript > Criar um novo Javascript > Investimento > No índice e Subfóruns >
Código:
jQuery(function(){jQuery("a[href^='/u'].gensmall,.title_profile a[href^='/u']").hover(function(){var b=jQuery(this).parent().height()-35,c=jQuery(this).position().left-20,b=jQuery(this).position().top-b,name=jQuery(this).text(),id=jQuery(this).attr("href").slice(2);jQuery("#user-hoverbox").remove();jQuery(this).after('<div id="user-hoverbox" style="left: '+c+'px;margin-top:20px"><div id="user-hoverbox-inner"><a href="/u'+id+'wall"><i class="icon-envelope-alt"></i> Ver </a><a href="/u'+id+'"><i class="icon-user"></i> Informações</a><a href="/privmsg?mode=post&u='+id+'"><i class="icon-comments"></i> Enviar MP</a><a href="/spa/'+name+'"><i class="icon-file-alt"></i> Mensagens</a><a href="/sta/'+name+'"><i class="icon-folder-open"></i> Todos os tópicos</a></div></div>');t=setTimeout(function(){jQuery("#user-hoverbox").hide()},3E3);jQuery("#user-hoverbox").mouseover(function(){clearTimeout(t)});jQuery("#user-hoverbox").mouseleave(function(){jQuery(this).remove()});return!1})});
Em seguida, adicione este código CSS em Visualização > Imagens e Cores > Cores > Folha de estilos CSS >
Código:
#user-hoverbox:before {
border-bottom: 5px solid #363636;
border-left: 5px solid rgba(0, 0, 0, 0);
border-right: 5px solid rgba(0, 0, 0, 0);
content: "";
height: 0;
left: 12px;
position: absolute;
top: -4px;
width: 0;
}
#user-hoverbox {
display: initial !important;
margin-left: 5px;
min-width: 160px;
padding-top: 1px;
position: absolute;
z-index: 999;
}
#user-hoverbox-inner {
border: 1px solid #000000;
border-radius: 2px 2px 2px 2px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.31);
width: 210px;
}
#user-hoverbox #user-hoverbox-inner a {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.87);
color: #DADADA;
border-bottom: 1px solid #AAAAAA;
display: block;
font-size: 11px;
padding: 8px;
text-align: left;
text-shadow: none !important;
z-index: 999;
}
.pun #page-body #user-hoverbox #user-hoverbox-inner a {
font-style: normal;
font-weight: 400;
}
#user-hoverbox #user-hoverbox-inner a:hover {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.93);
color: #FCFCFC;
}
Até mais!


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17142
Pontos Ativos : 21404

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Efeito ao passar mouse no nome do usuario

Mensagem por Connor R. em 31/05/14, 12:50 pm

Use este CSS:
Código:

#user-hoverbox #user-hoverbox-inner a:hover {
background: none repeat scroll 0 0 #FAFAFA;
color: #333333;
}

#user-hoverbox {
display: initial !important;
margin-left: 5px;
min-width: 160px;
padding-top: 1px;
position: absolute;
z-index: 999;
}
  #user-hoverbox a .icon-folder-open {
background-image: url("http://i.imgur.com/xbes4ru.png");
}
  #user-hoverbox a .icon-file-alt {
background-image: url("http://i.imgur.com/3tVmtX5.png");
}
  #user-hoverbox a .icon-envelope-alt {
background-image: url("http://i.imgur.com/LpRlXho.png");
}
  #user-hoverbox a .icon-comments {
background-image: url("http://i.imgur.com/H1HNIqI.png");
}
  .pun #user-hoverbox a i {
background-position: center center;
background-repeat: no-repeat;
float: left;
height: 10px;
margin-right: 3px;
margin-top: 2px;
opacity: 0.8;
width: 13px;
}
#user-hoverbox a .icon-user {
background-image: url("http://i.imgur.com/o0vbztB.png");
}
  .pun #page-body #user-hoverbox #user-hoverbox-inner a {
font-style: normal;
font-weight: 400;
}
#user-hoverbox #user-hoverbox-inner a {
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: 1px solid #AAAAAA;
color: #888888;
display: block;
font-size: 11px;
padding: 8px;
text-align: left;
text-shadow: none !important;
z-index: 999;
}
  #user-hoverbox:before {
border-bottom: 5px solid #363636;
border-left: 5px solid rgba(0, 0, 0, 0);
border-right: 5px solid rgba(0, 0, 0, 0);
content: "";
height: 0;
left: 12px;
position: absolute;
top: -4px;
width: 0;
}
  #user-hoverbox-inner {
background: none repeat scroll 0 0 #FFFFFF;
border: 4px solid #000000;
border-radius: 2px 2px 2px 2px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.31);
width: 210px;
}

Junto com o código Javascript que o Shek passou..
avatar

Connor R.
Usuário destaque

Masculino
Inscrito dia : 06/08/2012
Mensagens : 978
Pontos Ativos : 1594

Ver perfil do usuário http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Resolvido Re: Efeito ao passar mouse no nome do usuario

Mensagem por TappedOut em 31/05/14, 01:53 pm

Grato á todos!
#Resolvido
avatar

TappedOut
Usuário destaque

Masculino
Inscrito dia : 07/05/2014
Mensagens : 545
Pontos Ativos : 756

Ver perfil do usuário http://www.gtav-curiosidades.forumeiros.com

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