Colocar isso quando passar o mouse em cima

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

Resolvido Colocar isso quando passar o mouse em cima

Mensagem por aemdia6 em 17/03/14, 03:03 pm

Qual é minha questão:
Olá gostaria de colocar isso aqui quando passar o mouse em cima, Obrigado..

http://1.bp.blogspot.com/-oFVFPKSaL1w/Uyc4svJz4bI/AAAAAAAABLI/yR2_5wPPv24/s1600/dsgh.JPG

Vlw..

Endereço do meu fórum:
http://xgamesaem.forumclan.com

Versão do fórum:
PHPBB3
avatar

aemdia6
Usuário avançado

Masculino
Inscrito dia : 26/07/2013
Mensagens : 307
Pontos Ativos : 474

Ver perfil do usuário http://xgamesaem.forumclan.com/

Resolvido Re: Colocar isso quando passar o mouse em cima

Mensagem por :-EraGon-: em 17/03/14, 04:01 pm

Olá Convidado poderia nos dizer onde viu tal efeito ?
avatar

:-EraGon-:
Nível 9

Masculino
Inscrito dia : 12/12/2013
Mensagens : 224
Pontos Ativos : 414

Ver perfil do usuário http://suporteparaforuns.forumeiros.com https://www.facebook.com/facebook.com/hilterhp https://twitter.com/@HilterHP

Resolvido Re: Colocar isso quando passar o mouse em cima

Mensagem por aemdia6 em 17/03/14, 04:07 pm

Esse aqui:

http://suportedesign.forumeiros.com/forum

vlww parceiro..  Muito feliz
avatar

aemdia6
Usuário avançado

Masculino
Inscrito dia : 26/07/2013
Mensagens : 307
Pontos Ativos : 474

Ver perfil do usuário http://xgamesaem.forumclan.com/

Resolvido Re: Colocar isso quando passar o mouse em cima

Mensagem por Hancki em 17/03/14, 06:45 pm

Olá!

Use este código numa nova página JS, investida onde quiser:
Código:
$(function () {
    $("td.tcr [href^='/u']").hover(function () {
        var b = $(this).parent().height() - 35,
            c = $(this).position().left - 20,
            b = $(this).position().top - b,
            name = $(this).text(),
            id = $(this).attr("href").slice(2);
        $("#user-hoverbox").remove();
        $(this).after('<div id="user-hoverbox"style="left: ' + c + "px;top:" + b + 'px;"><div id="user-hoverbox-inner"><a href="/u' + id + '"><i class="icon-user"></i> Ver perfil</a><a href="/privmsg?mode=post&u=' + id + '"><i class="icon-comments"></i> Enviar Mensagem Privada</a><a href="/profile?mode=email&u=' + id + '"><i class="icon-envelope-alt"></i> E-mail</a><a href="/spa/' + name + '"><i class="icon-file-alt"></i> Encontrar todas as suas mensagens</a><a href="/sta/' + name + '"><i class="icon-folder-open"></i> Encontrar todos os seus tópicos</a></div></div>');
        t = setTimeout(function () {
            $("#user-hoverbox").hide()
        }, 3E3);
        $("#user-hoverbox").mouseover(function () {
            clearTimeout(t)
        });
        $("#user-hoverbox").mouseleave(function () {
            $(this).remove()
        });
        return !1
    })
});
E CSS na sua folha de estilos:
Código:
#user-hoverbox {
    display: initial !important;
    margin-left: 5px;
    min-width: 160px;
    padding-top: 1px;
    position: absolute;
    z-index: 999;
}
#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-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;
}
#user-hoverbox #user-hoverbox-inner a:hover {
    background: none repeat scroll 0 0 #FAFAFA;
    color: #333333;
}
#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 a .icon-user {
    background-image: url("http://i.imgur.com/o0vbztB.png");
}
#user-hoverbox a .icon-comments {
    background-image: url("http://i.imgur.com/H1HNIqI.png");
}
#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-envelope-alt {
    background-image: url("http://i.imgur.com/LpRlXho.png");
}
#user-hoverbox a .icon-file-alt {
    background-image: url("http://i.imgur.com/3tVmtX5.png");
}
#user-hoverbox a .icon-folder-open {
    background-image: url("http://i.imgur.com/xbes4ru.png");
}
#user-hoverbox #user-hoverbox-inner a {
    font-style: normal;
    font-weight: 400;
}
Resultado no seu fórum: http://prntscr.com/31qymo

Não se esqueça de referir a versão correta ao criar o tópico! Piscada

Hancki
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Resolvido Re: Colocar isso quando passar o mouse em cima

Mensagem por aemdia6 em 17/03/14, 07:11 pm

Era exatamente assim, Obrigado amigo, Fica com Deus..!!!  Tive uma idéia!
avatar

aemdia6
Usuário avançado

Masculino
Inscrito dia : 26/07/2013
Mensagens : 307
Pontos Ativos : 474

Ver perfil do usuário http://xgamesaem.forumclan.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