Gerir efeito hover nos nomes dos grupos

Há muito tempo que estou tentando procurar na busca de tópicos, mas não consegui infelizmente.
Venho apresentar só minha dúvida.
Olhe este imagem,

Eu queria colocar em meu fórum é chamado de Fórum de Temas, mais conhecido o FDT(Ajuda de Temas)
www.temas.forumeiros.net

"Quem me ajudará, mostrará seu destino de ajudar-los"
Cordialmente,Vughis 

Caro usuário,

Antes de postar uma pergunta, veja se a mesma já não se encontra respondida em tópicos criados anteriormente. Isso torna o processo de ajuda muito mais eficiente. Lembre-se de seguir as recomendações feitas antes de postar sua dúvida, elas evitam que casos assim aconteçam!

Veja se este tópico consegue resolver a sua dúvida, caso não basta que volte a nos informar para que possamos ajudá-lo a resolver o problema:
https://ajuda.forumeiros.com/t95615-

Recomendamos que utilize sempre a busca do fórum e, veja se já não existe um tutorial para a função em:

• Lista de Questões e respostas freqüentes
  
• Lista de Tutoriais e astúcias

Atenciosamente.

Na verdade, senhor Shaman,
Eu queria também aparece nos nomes que estão nos fóruns que sãos usuários voluntários da equipa, também nos widgets, também nas legendas.
Infelizmente lá no tópico é só na legenda senhor Shamam.

Antes de postar uma pergunta, veja se a mesma já não se encontra respondida em tópicos criados anteriormente. Isso torna o processo de ajuda muito mais eficiente. Lembre-se de seguir as recomendações feitas antes de postar sua dúvida, elas evitam que casos assim aconteçam!

Como eu falei:

Há muito tempo que estou tentando procurar na busca de tópicos, mas não consegui infelizmente.

Cordialmente,Vughis

Olá, adicione em seu CSS:

Código:

a[href*="/u"] span[style="color:CODIGODACORDOGRUPO"] strong {
  position: relative;
}

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

Em CODIGODACORDOGRUPO coloque exatamente a cor do grupo em que quer que apareça o efeito hover, exemplo. A cor dos Admintemas em seu fórum é #FF0000 então no lugar de CODIGODACORDOGRUPO o senhor deve colocar #FF0000, assim, todos os usuários com a cor #FF0000 receberá o efeito hover.

Em Seu texto aqui o senhor mude para o texto que quiser.

Abs.

Porém não entendi sua reposta.
Mesmo não entendi, poderá fazer um favor?
A parte do /u e é tem ser id do usuário, mais quero grupos particpativos.
Cordialmente,Vughis

Vughis escreveu:Porém não entendi sua reposta.
Mesmo não entendi, poderá fazer um favor?
A parte do /u e é tem ser id do usuário, mais quero grupos particpativos.
Cordialmente,Vughis

Não, o senhor deixa o código do jeito que está Só mude a parte da cor, sendo assim, o código vai pegar todo nome de usuário com aquela COR e aplicar o efeito hover.

Abs.

Saudações autor,

Deseja o efeito para todos os grupos? Se sim, utilize este código CSS:
Cpainel ->> Visualização ->>Gestão de imagens ->> Cores ->>Folha de Estilo CSS

Código:

a[href*="/u"] span[style="color:#000099"] strong {
  position: relative;
}

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

Salve e visualize teu fórum.
Abraços.
Sennior

Não funcionou.

Mas é lógico! Que falta de atenção a minha.
O efeito seria para seu Nickname né? Primeiro, terá que deixar o grupo de administradores visível em teu fórum:
https://ajuda.forumeiros.com/t12839-

Depois, utilize este código e veja se resulta:

Código:

a[href*="/u1"] span[style="color:#000099"] strong {
  position: relative;
}

a[href*="/u1"] span[style="color:#000099"] strong:hover:after {
  background-color: rgba(130,93,0,0.5);
  border-radius: 5px;
  bottom: 15px;
  color: #fff;
  content: "Seu texto aqui";
  display: inline-block;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  left: -70px;
  padding: 2px;
  position: absolute;
  white-space: nowrap;
  z-index: 1;
}

Abraços.
Sennior

Olá @Vughis,

Aqui um exemplo para o Admintemas:

Código:

a[href*="/u"] span[style="color:#FF0000"] strong:hover:after {
  background-color: rgba(255, 0, 0, 0.54);
  border-radius: 5px;
  bottom: 15px;
  color: #fff;
  content: "Seu texto aqui";
  display: inline-block;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  left: -70px;
  padding: 2px;
  position: absolute;
  white-space: nowrap;
  z-index: 1;
}
a[href*="/u"] span[style="color:#FF0000"] strong {
  position: relative;
}

Agora para os restantes grupos deve alterar #FF0000 para a cor dos respetivos grupos.

Até mais,
iChees

@Sennior
Não funcionou
@iChees
Funcionou, pode fechar este tópico e agradeço aos vocês tentaram me ajudar.
Cordialmente,Vughis