Efeito hover em nome de usuários pertencentes a um grupo

Olá, adicionei o seguinte código em meu template para obter o efeito hover no nome dos grupos:

#main-content > p > em > b > a[class="gensmall"][href="/g1-administrador"]{
position:relative
}
#main-content > p > em > b > a[class="gensmall"][href="/g1-administrador"]:hover:after{
background-color: #B22222;
border-radius:5px;
bottom:15px;
color:#fff;
content:"Gestão administrativa e técnica do fórum";
display:inline-block;
font-size:10px;
font-style:normal;
font-weight:700;
left:-50px;
padding:2px;
position:absolute;
white-space:nowrap;
z-index:1
}

Porém o efeito só fica restrito à legenda:



Gostaria de estender esse código para o fórum inteiro onde apareça o nome do usuário, também gostaria de aplicar uma transparência ao fundo do efeito (como acontece aqui no fórum).

Olá!

Veja este tópico:


Até mais,
Reset.

Foi deste tópico mesmo que tirei o código supracitado, esse último código, ao qual se refere, não deu resultados aqui.

Saudações,

Por gentileza, faça um teste com este código colocando-o no inicio de teu CSS:

Código:

a[href*="/u1"] {
position: relative;
}
a[href*="/u1"]:hover:after {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    bottom: 15px;
    color: #FFFFFF;
    content: "Suporte no atendimento aos usuários";
    display: inline-block;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    left: -70px;
    padding: 2px;
    position: absolute;
    white-space: nowrap;
    z-index: 1;
}

Até mais.

Olá, Sennior.

Fiz o teste aqui, porém está aparecendo em todos usuários que tem o número 1 em alguma parte do link de perfil, veja:



Não teria como fazer esse efeito aparecer somente em nomes de usuários pertencentes a um grupo X?
Tentei trocar o /u1 por /g1-administrador, para ver se resultava, mas não deu nada..

Hum... Tente este:

Código:

a[href*="/u"] span[style="color:#FF0000"] strong {
position: relative;
}
a[href*="/u"] span[style="color:#FF0000"] strong:hover:after {
background-color: rgba(130,93,0,0.5);
border-radius: 5px;
bottom: 15px;
color: #fff;
content: "Suporte no atendimento aos usuários";
display: inline-block;
font-size: 10px;
font-style: normal;
font-weight: 700;
left: -70px;
padding: 2px;
position: absolute;
white-space: nowrap;
z-index: 1;
}

Até mais.

Olá, Sennior. 
Executei o código, funcionou, porém, como faço para aplicar para usuários de outros grupos da moderação? (como aqui no fórum)

Ah sim, bem simples.
Onde esta a cor "#FF0000" deverá alterar pela cor relacionada ao grupo.
Exemplo para o grupo de Colaboradores do teu fórum, basta pegar a cor do grupo e alterar:

Código:

a[href*="/u"] span[style="color:#9900FF"] strong {
position: relative;
}
a[href*="/u"] span[style="color:#9900FF"] strong:hover:after {
background-color: rgba(130,93,0,0.5);
border-radius: 5px;
bottom: 15px;
color: #fff;
content: "Suporte no atendimento aos usuários";
display: inline-block;
font-size: 10px;
font-style: normal;
font-weight: 700;
left: -70px;
padding: 2px;
position: absolute;
white-space: nowrap;
z-index: 1;
}

Conseguiu?
Até mais.

Perfeito, Sennior, era isso mesmo!


Abraços, bom domingo!