Efeito hover no nick

3 participantes

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

Tópico resolvido Efeito hover no nick

Mensagem por Luis_xD 15.07.15 21:24

Convidado Blz?

Bom vi um efeito aqui na FDF muito legal Feliz, exemplo: quando você coloca o mause emcima de um nick de um usuario da administração do FDF aparece umas informações como estás imagens de exemplos

Efeito hover no nick Sem_ty11


ou quando coloca o mause sobre um grupo da FDF aparece as informações

Efeito hover no nick Sem_ty12


Poderião me passar o codigo deste efeito por favor?

Meu Fórum : http://luisdesigner.forumeiros.com/

Até zen
avatar

Luis_xD
****

Membro desde : 14/03/2015
Mensagens : 220
Pontos : 320

http://teesteforumeiros.forumeiros.com/

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Efeito hover no nick

Mensagem por Fraise 15.07.15 21:26

Olá!

Adicione este código em sua CSS:

Código:
a[href*="/u1"] span[style="color:#BFA98E"] strong {
  position:relative;
}
a[href*="/u1"] span[style="color:#BFA98E"] strong:hover:after {
   background-color:"#BFA98E";
   border-radius: 2px;
   bottom: 15px;
       color: #FFFFFF;
   content: "Administrador do fórum";
   display: inline-block;
   font-size: 10px;
   font-style: normal;
   font-weight: 700;
   left: -40px;
   padding: 3px;
   position: absolute;
   white-space: nowrap;
   z-index: 1;
}

Para colocar em outros usuários, é só alterar o "u1" para outro. Piscada

Cumprimentos.
Fraise
Fraise

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no nick

Mensagem por RafaelS. 15.07.15 21:28

Olá!

Vejamos um código que adiciona a todos usuários do grupo:

Código:
a[href*="/u"] span[style="color:#BFA98E"] strong {
position:relative;
}
a[href*="/u"] span[style="color:#BFA98E"] strong:hover:after {
background-color:"#BFA98E";
border-radius: 2px;
bottom: 15px;
color: #FFFFFF;
content: "Administrador do fórum";
display: inline-block;
font-size: 10px;
font-style: normal;
font-weight: 700;
left: -40px;
padding: 3px;
position: absolute;
white-space: nowrap;
z-index: 1;
}

Flecha ajudeiros Troque #BFA98E pela cor do grupo, que deseja adicionar o efeito.

Atenciosamente.
avatar

RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no nick

Mensagem por Luis_xD 15.07.15 21:35

Olá @Raffy efeito fico muito bom, mais teria como fazer o msm quando colocar o mause emcima dos grupo do forum e aparecer este efeito?
avatar

Luis_xD
****

Membro desde : 14/03/2015
Mensagens : 220
Pontos : 320

http://teesteforumeiros.forumeiros.com/

Ir para o topo Ir para baixo

Ajudeiro

Tópico resolvido Re: Efeito hover no nick

Mensagem por Fraise 15.07.15 21:40

Olá!

Penso que tenha de adicionar individualmente. Poderá criar múltiplos códigos e só alterar o "/u1" para o ID do usuário desejado.

Cumprimentos.
Fraise
Fraise

Fraise
Ajudeiro
Ajudeiro

Membro desde : 26/06/2015
Mensagens : 6566
Pontos : 8050

https://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Efeito hover no nick

Mensagem por RafaelS. 15.07.15 21:40

Olá!

Tem sim:

Código:
    a[href*="/u"] span[style="color:#BFA98E"] strong {
    position:relative;
    }
    a[href*="/u"] span[style="color:#BFA98E"] strong:hover:after, .legendaa a.gensmall[style="color:#BFA98E"]:hover:after {
    background-color:"#BFA98E";
    border-radius: 2px;
    bottom: 15px;
    color: #FFFFFF;
    content: "Administrador do fórum";
    display: inline-block;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    left: -40px;
    padding: 3px;
    position: absolute;
    white-space: nowrap;
    z-index: 1;
    }

Flecha ajudeiros Troque #BFA98E pela cor do grupo Piscada

Atenciosamente.
avatar

RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no nick

Mensagem por Luis_xD 15.07.15 22:05

Olá Raffy o efeito n funciono
avatar

Luis_xD
****

Membro desde : 14/03/2015
Mensagens : 220
Pontos : 320

http://teesteforumeiros.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no nick

Mensagem por RafaelS. 15.07.15 22:16

Olá!

Troque por este:

Código:
        a[href*="/u"] span[style="color:#BFA98E"] strong, .legendaa a.gensmall[href*="/g1"] {
        position:relative;
        }
        a[href*="/u"] span[style="color:#BFA98E"] strong:hover:after, .legendaa a.gensmall[href*="/g1"]:hover:after {
        background-color: #BFA98E !important;
        border-radius: 2px;
        bottom: 15px;
        color: #FFFFFF;
        content: "Administrador do fórum";
        display: inline-block;
        font-size: 10px;
        font-style: normal;
        font-weight: 700;
        left: -40px;
        padding: 3px;
        position: absolute;
        white-space: nowrap;
        z-index: 1;
        }

Modificações:

Flecha ajudeiros Troque #BFA98E pela cor do grupo
Flecha ajudeiros Troque /g1- pelo link do grupo

Atenciosamente.
avatar

RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no nick

Mensagem por Luis_xD 15.07.15 22:30

AE agora sim pode closa
avatar

Luis_xD
****

Membro desde : 14/03/2015
Mensagens : 220
Pontos : 320

http://teesteforumeiros.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover no nick

Mensagem por RafaelS. 15.07.15 22:32

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
avatar

RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

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