Descrição dos Grupos - Modo Hover

Relembrando a primeira mensagem :

Detalhes da dúvida

Versão do fórum : phpBB2
Nível de acesso : Fundador
Navegador usado : Mozilla Firefox, Google Chrome
Imagem :

Imagem da minha dúvida:

Membros afetados : Todos os membros do fórum
Endereço do fórum : http://ams-meiosangue-rpg.forumeiros.com/

Descrição do problema

Bom... procurando pelo fórum essa questão já resolvida, achei diversas soluções mas nenhuma que desse certo comigo. Eu queria um efeito hover na descrição dos grupos do meu fórum, assim como é no Fdf (Quando o cursor está sobre o nome do grupo na legenda aparece um balãozinho com a descrição do grupo em questão. O mesmo balãozinho aparece quando o cursor está sobre o Nick de algum usuário que pertence ao grupo). Acontece que encontrei somente um code que deu certo comigo, mas ele só apresente a descrição em hover (o balãozinho) nos nicks dos usuários pertencentes ao grupo, e não sobre o nome (no meu caso Imagem) do grupo. Como pode ser visto na imagem...

O code é esse:

Código:

a[href*="/u"] span[style="color:#F0E078"] strong {
position: relative;
}
a[href*="/u"] span[style="color:#F0E078"] strong:hover:after {
background-color: rgba(240,224,120,2);
border-radius: 5px;
bottom: 15px;
color: #fff;
content: "Deuses - Equipe administrativa do fórum";
display: inline-block;
font-size: 10px;
font-style: normal;
font-weight: 700;
left: -70px;
padding: 2px;
position: absolute;
white-space: nowrap;
z-index: 1;
}

Será que alguém poderia me ajudar com um código que funcionasse em ambas as partes (sobre o nome do grupo e sobre os Nicks dos usuários que pertencem a esse grupo)?

Mas o código que eu passei não ficou bem posicionado no seu monitor, Bruno? Tem certeza que você usou o código que eu passei?

Eu usei o code que você passou... todos eles... e sim, ficou mal posicionado no meu monitor... esse que estou usando agora é um que o Sennior tinha passado... e também está mal posicionado...
É o que estou dizendo... acho que é porque as resoluções são diferentes... deixa eu só ver o que ele quer dizer/fazer com meu CSS, vou mudar os valores das posições de uma forma que fique bom na minha visualização... aí certamente na sua visualização vai ficar mal posicionado (pela lógica... mas tomara que não...)

Coloque este código no inicio d eteu CSS e veja se dá algum resultado:

Código:

a.gensmall {position: relative!important;}

Até mais.

Qual a função desse código? Houve resultado! Veja como ficou:

Spoiler:

Perceba que ainda ficou um pouco deslocado... será que agora é só mexer no "left" e "bottom"?

Olá,

Senhor, peço que desative os códigos dos nossos amigos por algum instante e me avise para fazer o seu código.


Atenciosamente.

Então podem continuar a me ajudar?

Boas,

Bem, vim tentando modificar, e o único meio seria pelo código utilizado no CSS dos grupos, lembra? Aquele que eu editei as cores?
Poderia mandar teu CSS por completo?

Até mais.

Boa tarde...
Ah sim... claro, aqui está! ^^

Meu CSS:

UP

Saudações,

Eu alterei somente a visualização do grupo amarelo ou seja, o grupo Deuses para que o senhor visualize se esta bom e se posso continuar:

Código:

a.gensmall {position: relative!important;}

body {
background: url(http://i39.servimg.com/u/f39/18/96/29/25/topo_e12.png) fixed, url(http://i39.servimg.com/u/f39/18/96/29/25/base_e12.png) fixed, url(http://i39.servimg.com/u/f39/18/96/29/25/corpo_15.png) fixed, url(http://i39.servimg.com/u/f39/18/96/29/25/topo_d12.png) fixed, url(http://i39.servimg.com/u/f39/18/96/29/25/base_d14.png) fixed, url(http://i39.servimg.com/u/f39/18/96/29/25/corpo_17.png) fixed, url(http://i60.tinypic.com/2myx641.jpg), url(http://i61.tinypic.com/29osh8z.jpg);
background-position: 0 0%, 0 100%, 0 50%, 100% 0%, 100% 100%, 100% 50%, 0 0, 0 548;
background-repeat: no-repeat, no-repeat, repeat-y, no-repeat, no-repeat, repeat-y, repeat-x, repeat;
 
 
  a. {outline: none;} 

  a.mainmenu[href="/faq"]{display: none !important;}
  a.mainmenu[href="/groups"]{display: none !important;}
  a.mainmenu[href="/memberlist"]{display: none !important;}
 
 
a[href*="/u"] span[style="color:#F0E078"] strong {
position: relative;
}
a[href*="/u"] span[style="color:#F0E078"] strong:hover:after {
background-color: rgba(240,224,120,2);
border-radius: 5px;
bottom: 15px;
color: #fff;
content: "Deuses - Equipe administrativa do fórum";
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*="/g2-"]:hover:after{background-color:rgba(240,224,120,2);border-radius:5px;bottom:-60%;color:#fff;content:"Deuses - Equipe administrativa do fórum";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-91%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g7-"]:hover:after{background-color:rgba(187,209,237,2);border-radius:5px;bottom:-60%;color:#fff;content:"Filhos de Zeus - Chalé 1";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:38%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g3-"]:hover:after{background-color:rgba(65,105,224,2);border-radius:5px;bottom:-60%;color:#fff;content:"Filhos de Poseidon - Chalé 3";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:48%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g4-"]:hover:after{background-color:rgba(0,204,0,2);border-radius:5px;bottom:-57%;color:#fff;content:"Filhos de Deméter - Chalé 4";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:61%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g5-"]:hover:after{background-color:rgba(237,0,0,2);border-radius:5px;bottom:-59%;color:#fff;content:"Filhos de Ares - Chalé 5";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:73%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g6-"]:hover:after{background-color:rgba(168,168,168,2);border-radius:5px;bottom:-70%;color:#fff;content:"Filhos de Atena - Chalé 6";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:31%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g8-"]:hover:after{background-color:rgba(255,217,0,2);border-radius:5px;bottom:-69%;color:#fff;content:"Filhos de Apolo - Chalé 7";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:42%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g9-"]:hover:after{background-color:rgba(191,191,191,2);border-radius:5px;bottom:-69%;color:#fff;content:"Caçadoras de Ártemis - Chalé 8";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:54%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g10-"]:hover:after{background-color:rgba(161,35,35,2);border-radius:5px;bottom:-69%;color:#fff;content:"Filhos de Hefesto - Chalé 9";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:67%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g11-"]:hover:after{background-color:rgba(255,110,180,2);border-radius:5px;bottom:-80%;color:#fff;content:"Filhos de Afrodite - Chalé 10";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:30%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g12-"]:hover:after{background-color:rgba(140,90,43,2);border-radius:5px;bottom:-79%;color:#fff;content:"Filhos de Hermes - Chalé 11";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:42%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g13-"]:hover:after{background-color:rgba(117,11,71,2);border-radius:5px;bottom:-81%;color:#fff;content:"Filhos de Dionísio - Chalé 12";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:55%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g14-"]:hover:after{background-color:rgba(0,0,0,2);border-radius:5px;bottom:-82%;color:#fff;content:"Filhos de Hades - Chalé 13";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:69%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g15-"]:hover:after{background-color:rgba(97,179,172,2);border-radius:5px;bottom:-91%;color:#fff;content:"Filhos de ͍ris - Chalé 14";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:30%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g16-"]:hover:after{background-color:rgba(240,248,255,2);border-radius:5px;bottom:-91%;color:#4899e0;content:"Filhos de Hipnos - Chalé 15";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:43%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g17-"]:hover:after{background-color:rgba(95,51,184,2);border-radius:5px;bottom:-92%;color:#fff;content:"Filhos de Nêmesis - Chalé 16";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:52%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g18-"]:hover:after{background-color:rgba(255,250,240,2);border-radius:5px;bottom:-92%;color:#f0aa1d;content:"Filhos de Nice - Chalé 17";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:63%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g19-"]:hover:after{background-color:rgba(240,255,240,2);border-radius:5px;bottom:-90%;color:#0acc0a;content:"Filhos de Hebe - Chalé 18";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:73%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g20-"]:hover:after{background-color:rgba(237,201,0,2);border-radius:5px;bottom:-102%;color:#fff;content:"Filhos de Tique - Chalé 19";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:30%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g21-"]:hover:after{background-color:rgba(104,33,140,2);border-radius:5px;bottom:-103%;color:#fff;content:"Filhos de Hécate - Chalé 20";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:41%;padding:2px;position:absolute;white-space:nowrap;z-index:1}
 
}

Até mais.

Ficou ótimo! Bem centralizado! Pode continuar! Obrigado!

Saudações,

Aqui esta amigo, desculpe a demora é que eu tinha me esquecido de teu tópico:

Código:

a.gensmall {position: relative!important;}

body {
background: url(http://i39.servimg.com/u/f39/18/96/29/25/topo_e12.png) fixed, url(http://i39.servimg.com/u/f39/18/96/29/25/base_e12.png) fixed, url(http://i39.servimg.com/u/f39/18/96/29/25/corpo_15.png) fixed, url(http://i39.servimg.com/u/f39/18/96/29/25/topo_d12.png) fixed, url(http://i39.servimg.com/u/f39/18/96/29/25/base_d14.png) fixed, url(http://i39.servimg.com/u/f39/18/96/29/25/corpo_17.png) fixed, url(http://i60.tinypic.com/2myx641.jpg), url(http://i61.tinypic.com/29osh8z.jpg);
background-position: 0 0%, 0 100%, 0 50%, 100% 0%, 100% 100%, 100% 50%, 0 0, 0 548;
background-repeat: no-repeat, no-repeat, repeat-y, no-repeat, no-repeat, repeat-y, repeat-x, repeat;
 
 
  a. {outline: none;} 

  a.mainmenu[href="/faq"]{display: none !important;}
  a.mainmenu[href="/groups"]{display: none !important;}
  a.mainmenu[href="/memberlist"]{display: none !important;}
 
 
a[href*="/u"] span[style="color:#F0E078"] strong {
position: relative;
}
a[href*="/u"] span[style="color:#F0E078"] strong:hover:after {
background-color: rgba(240,224,120,2);
border-radius: 5px;
bottom: 15px;
color: #fff;
content: "Deuses - Equipe administrativa do fórum";
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*="/g2-"]:hover:after{background-color:rgba(240,224,120,2);border-radius:5px;bottom:-60%;color:#fff;content:"Deuses - Equipe administrativa do fórum";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-91%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g7-"]:hover:after{background-color:rgba(187,209,237,2);border-radius:5px;bottom:-60%;color:#fff;content:"Filhos de Zeus - Chalé 1";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-7%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g3-"]:hover:after{background-color:rgba(65,105,224,2);border-radius:5px;bottom:-60%;color:#fff;content:"Filhos de Poseidon - Chalé 3";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-6%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g4-"]:hover:after{background-color:rgba(0,204,0,2);border-radius:5px;bottom:-57%;color:#fff;content:"Filhos de Deméter - Chalé 4";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:4%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g5-"]:hover:after{background-color:rgba(237,0,0,2);border-radius:5px;bottom:-59%;color:#fff;content:"Filhos de Ares - Chalé 5";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-11%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g6-"]:hover:after{background-color:rgba(168,168,168,2);border-radius:5px;bottom:-70%;color:#fff;content:"Filhos de Atena - Chalé 6";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:11%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g8-"]:hover:after{background-color:rgba(255,217,0,2);border-radius:5px;bottom:-69%;color:#fff;content:"Filhos de Apolo - Chalé 7";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-7%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g9-"]:hover:after{background-color:rgba(191,191,191,2);border-radius:5px;bottom:-2%;color:#fff;content:"Caçadoras de Ártemis - Chalé 8";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:54%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g10-"]:hover:after{background-color:rgba(161,35,35,2);border-radius:5px;bottom:-69%;color:#fff;content:"Filhos de Hefesto - Chalé 9";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-7%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g11-"]:hover:after{background-color:rgba(255,110,180,2);border-radius:5px;bottom:-80%;color:#fff;content:"Filhos de Afrodite - Chalé 10";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:3%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g12-"]:hover:after{background-color:rgba(140,90,43,2);border-radius:5px;bottom:-79%;color:#fff;content:"Filhos de Hermes - Chalé 11";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-6%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g13-"]:hover:after{background-color:rgba(117,11,71,2);border-radius:5px;bottom:-81%;color:#fff;content:"Filhos de Dionísio - Chalé 12";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:2%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g14-"]:hover:after{background-color:rgba(0,0,0,2);border-radius:5px;bottom:-82%;color:#fff;content:"Filhos de Hades - Chalé 13";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-2%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g15-"]:hover:after{background-color:rgba(97,179,172,2);border-radius:5px;bottom:-91%;color:#fff;content:"Filhos de ͍ris - Chalé 14";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:5%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g16-"]:hover:after{background-color:rgba(240,248,255,2);border-radius:5px;bottom:-91%;color:#4899e0;content:"Filhos de Hipnos - Chalé 15";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-5%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g17-"]:hover:after{background-color:rgba(95,51,184,2);border-radius:5px;bottom:-92%;color:#fff;content:"Filhos de Nêmesis - Chalé 16";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-13%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g18-"]:hover:after{background-color:rgba(255,250,240,2);border-radius:5px;bottom:-92%;color:#f0aa1d;content:"Filhos de Nice - Chalé 17";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-16%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g19-"]:hover:after{background-color:rgba(240,255,240,2);border-radius:5px;bottom:-90%;color:#0acc0a;content:"Filhos de Hebe - Chalé 18";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-15%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g20-"]:hover:after{background-color:rgba(237,201,0,2);border-radius:5px;bottom:-102%;color:#fff;content:"Filhos de Tique - Chalé 19";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-6%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g21-"]:hover:after{background-color:rgba(104,33,140,2);border-radius:5px;bottom:-103%;color:#fff;content:"Filhos de Hécate - Chalé 20";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:5%;padding:2px;position:absolute;white-space:nowrap;z-index:1}
 
}

Algo mais?
Até mais.

Ah... rsrs tudo bem... ^^
Ahn... só um detalhezinho... estou com medo de mexer e bagunçar depois... o grupo "Caçadoras de Ártemis" ficou desajustado ainda... poderia ver isso pra mim, por favor?

Grato desde já! ^^

Boas,

Altere amigão:

Código:

a.gensmall {position: relative!important;}

body {
background: url(http://i39.servimg.com/u/f39/18/96/29/25/topo_e12.png) fixed, url(http://i39.servimg.com/u/f39/18/96/29/25/base_e12.png) fixed, url(http://i39.servimg.com/u/f39/18/96/29/25/corpo_15.png) fixed, url(http://i39.servimg.com/u/f39/18/96/29/25/topo_d12.png) fixed, url(http://i39.servimg.com/u/f39/18/96/29/25/base_d14.png) fixed, url(http://i39.servimg.com/u/f39/18/96/29/25/corpo_17.png) fixed, url(http://i60.tinypic.com/2myx641.jpg), url(http://i61.tinypic.com/29osh8z.jpg);
background-position: 0 0%, 0 100%, 0 50%, 100% 0%, 100% 100%, 100% 50%, 0 0, 0 548;
background-repeat: no-repeat, no-repeat, repeat-y, no-repeat, no-repeat, repeat-y, repeat-x, repeat;
 
 
  a. {outline: none;} 

  a.mainmenu[href="/faq"]{display: none !important;}
  a.mainmenu[href="/groups"]{display: none !important;}
  a.mainmenu[href="/memberlist"]{display: none !important;}
 
 
a[href*="/u"] span[style="color:#F0E078"] strong {
position: relative;
}
a[href*="/u"] span[style="color:#F0E078"] strong:hover:after {
background-color: rgba(240,224,120,2);
border-radius: 5px;
bottom: 15px;
color: #fff;
content: "Deuses - Equipe administrativa do fórum";
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*="/g2-"]:hover:after{background-color:rgba(240,224,120,2);border-radius:5px;bottom:-60%;color:#fff;content:"Deuses - Equipe administrativa do fórum";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-91%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g7-"]:hover:after{background-color:rgba(187,209,237,2);border-radius:5px;bottom:-60%;color:#fff;content:"Filhos de Zeus - Chalé 1";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-7%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g3-"]:hover:after{background-color:rgba(65,105,224,2);border-radius:5px;bottom:-60%;color:#fff;content:"Filhos de Poseidon - Chalé 3";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-6%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g4-"]:hover:after{background-color:rgba(0,204,0,2);border-radius:5px;bottom:-57%;color:#fff;content:"Filhos de Deméter - Chalé 4";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:4%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g5-"]:hover:after{background-color:rgba(237,0,0,2);border-radius:5px;bottom:-59%;color:#fff;content:"Filhos de Ares - Chalé 5";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-11%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g6-"]:hover:after{background-color:rgba(168,168,168,2);border-radius:5px;bottom:-70%;color:#fff;content:"Filhos de Atena - Chalé 6";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:11%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g8-"]:hover:after{background-color:rgba(255,217,0,2);border-radius:5px;bottom:-69%;color:#fff;content:"Filhos de Apolo - Chalé 7";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-7%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g9-"]:hover:after{background-color:rgba(191,191,191,2);border-radius:5px;bottom:-2%;color:#fff;content:"Caçadoras de Ártemis - Chalé 8";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-3%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g10-"]:hover:after{background-color:rgba(161,35,35,2);border-radius:5px;bottom:-69%;color:#fff;content:"Filhos de Hefesto - Chalé 9";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-7%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g11-"]:hover:after{background-color:rgba(255,110,180,2);border-radius:5px;bottom:-80%;color:#fff;content:"Filhos de Afrodite - Chalé 10";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:3%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g12-"]:hover:after{background-color:rgba(140,90,43,2);border-radius:5px;bottom:-79%;color:#fff;content:"Filhos de Hermes - Chalé 11";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-6%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g13-"]:hover:after{background-color:rgba(117,11,71,2);border-radius:5px;bottom:-81%;color:#fff;content:"Filhos de Dionísio - Chalé 12";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:2%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g14-"]:hover:after{background-color:rgba(0,0,0,2);border-radius:5px;bottom:-82%;color:#fff;content:"Filhos de Hades - Chalé 13";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-2%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g15-"]:hover:after{background-color:rgba(97,179,172,2);border-radius:5px;bottom:-91%;color:#fff;content:"Filhos de ͍ris - Chalé 14";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:5%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g16-"]:hover:after{background-color:rgba(240,248,255,2);border-radius:5px;bottom:-91%;color:#4899e0;content:"Filhos de Hipnos - Chalé 15";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-5%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g17-"]:hover:after{background-color:rgba(95,51,184,2);border-radius:5px;bottom:-92%;color:#fff;content:"Filhos de Nêmesis - Chalé 16";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-13%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g18-"]:hover:after{background-color:rgba(255,250,240,2);border-radius:5px;bottom:-92%;color:#f0aa1d;content:"Filhos de Nice - Chalé 17";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-16%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g19-"]:hover:after{background-color:rgba(240,255,240,2);border-radius:5px;bottom:-90%;color:#0acc0a;content:"Filhos de Hebe - Chalé 18";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-15%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g20-"]:hover:after{background-color:rgba(237,201,0,2);border-radius:5px;bottom:-102%;color:#fff;content:"Filhos de Tique - Chalé 19";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:-6%;padding:2px;position:absolute;white-space:nowrap;z-index:1}

a[href*="/g21-"]:hover:after{background-color:rgba(104,33,140,2);border-radius:5px;bottom:-103%;color:#fff;content:"Filhos de Hécate - Chalé 20";display:inline-block;font-size:10px;font-style:normal;font-weight:700;left:5%;padding:2px;position:absolute;white-space:nowrap;z-index:1}
 
}

Até mais.

Isso!! Muito obrigado! Agora ficou tudo certinho... Obrigado! ^^