Cargo ao passar o mouse

Detalhes da questão

Descrição

Código:

a[href^="/u"] span[style$="#000DFF"]:hover:after {
    background-color: #000DFF;
    content: "Fundador";
    padding: 5px;
    border-radius: 5px;
    height: max-content;
    width: max-content;
    position: absolute;
    margin-top: -28px;
    margin-left: -52px;
    color: #fff!important;
    font-weight: bold;
}


Wusthy escreveu:Olá @OneLife

Adicione em sua folha de estilo (CSS) o seguinte código:

Código:

a[href^="/u"] span[style$="#000DFF"]:hover:after {
    background-color: #000DFF;
    content: "Fundador";
    padding: 5px;
    border-radius: 5px;
    height: max-content;
    width: max-content;
    position: absolute;
    margin-top: -28px;
    margin-left: -52px;
    color: #fff!important;
    font-weight: bold;
}


Explicação breve: background-color: #000DFF; = O fundo do efeito de acordo com cada grupo que o usuário fazer parte;

span[style$="#000DFF"] = Cor do Grupo se encontra dentro das aspas;

content: "Fundador"; = Nome que irá aparecer no efeito do mouse, modifique o Fundador para o nome do grupo que irá aparecer.

No mais, aguardo respostas sua!

Atenciosamente,
Wusthy.

Wusthy escreveu:Olá @OneLife

Poderia enviar sua folha de estilo para eu dar uma olhada melhor nela?

Atenciosamente,
Wusthy.

Código:

/* Posição menu */
div#headerbar-top:not(.is-sticky) {
    margin-top: 150px;
}
/* Banner */
a#logo img[src="https://i.imgur.com/4aV029Y.png"]
{
  display: none;
}
 
.headerbar {
    background-image: url(https://imgur.com/zeK7AwG.gif);
    background-size: cover;
    height: 220px
}
/* Campo do avatar */
.postprofile {
    text-align: center;
}
.row2 {background-color: #ffffff!important;}
/* Avatar quadrado */
.postprofile-avatar img {
    border: 5px solid #eee;
    border-radius: 2px;
    height: auto;
    max-height: 280px;
    max-width: 180px;
    width: auto;
}
/* Centralizar perfis */
dd.postprofile-contact {
    display: inline-block;
    vertical-align: middle;
}
  /* Legenda */
.block-footer {
    border-color: rgba(0,0,0,0.05);
    border-radius: 0 0 3px 3px;
    border-style: solid;
    border-width: 1px 0 0;
    margin: 18px -18px -18px;
    font-size: 0px;
    padding: 10px 8px 7px 5px;
    text-align: center;
}
.block-footer b {
    font-size: 13px;
}
.block-footer strong {
    display:none;
}
.block-footer a {
  font-size: 14px;
  font-style: normal;
 
  margin-right: 15px;
  transition: .3s;
}
.block-footer a:hover {
  background: #ddd;
  padding: 12px 10px 9px;
}
/* Linha atrás do perfil */
.post-head {
    border-top-width: 0px;
    border-bottom-width: 1px;
    border-color: #202224;
}
/*Categorias Detalhes*/
ul.topiclist.forums {
    padding: 5px;
}
li.row {
    padding: 5px;
    background-color: #Fff;
    border: 0px;
    border-left: 5px solid #00008B;
    border-radius: 0;
}
li.row dd {
    border: 0px;
}
li.row {
      margin-bottom: 5px!important;
}
ul.topiclist.bg_none {
    background: #00008B;
}
li.row {
    padding: 0px;
}
 dd.dterm {
    padding-bottom: 0 !important;
}
/* Categorias*/
ul.forums {
    background-color: #ffffff;
}
ul.forums .posts:after {
    content: 'mensagens';
}
ul.forums .topics:after {
    content: 'tópicos';
}
.forabg .topiclist .header {
    border-bottom: 3px solid #00008B;
}
/*Diretor*/
a[href*="/u"] span[style="color:#0015FF"] strong {
  position:relative !important;
}
a[href*="/u"] span[style="color:#0015FF"] strong:hover:after{
  background-color:#0015FF !important;
  border-radius:5px !important;
  bottom:15px !important;
  color:#fff !important;
  content:"Diretor do clã" !important;
  display:inline-block !important;
  font-size:10px !important;
  font-style:normal !important;
  font-weight:700 !important;
  left:-40px !important;
  padding:2px !important;
  position:absolute !important;
  white-space:nowrap !important;
  z-index:1 !important;
}

/*Inteligência*/
a[href*="/u"] span[style="color:#00F010"] strong {
  position:relative !important;
}
a[href*="/u"] span[style="color:#00F010"] strong:hover:after{
  background-color: #00F010 !important;
  border-radius:5px !important;
  bottom:15px !important;
  color:#fff !important;
  content:"Inteligência do clã" !important;
  display:inline-block !important;
  font-size:10px !important;
  font-style:normal !important;
  font-weight:700 !important;
  left:-40px !important;
  padding:2px !important;
  position:absolute !important;
  white-space:nowrap !important;
  z-index:1 !important;
}

/*Corregedor*/
a[href*="/u"] span[style="color:#00B0F0"] strong {
  position:relative !important;
}
a[href*="/u"] span[style="color:#00B0F0"] strong:hover:after{
  background-color:#00B0F0 !important;
  border-radius:5px !important;
  bottom:15px !important;
  color:#fff !important;
  content:"Corregedor do clã" !important;
  display:inline-block !important;
  font-size:10px !important;
  font-style:normal !important;
  font-weight:700 !important;
  left:-40px !important;
  padding:2px !important;
  position:absolute !important;
  white-space:nowrap !important;
  z-index:1 !important;
}

/*Tenente*/
a[href*="/u"] span[style="color:#F00000"] strong {
  position:relative !important;
}
a[href*="/u"] span[style="color:#F00000"] strong:hover:after{
  background-color:#F00000 !important;
  border-radius:5px !important;
  bottom:15px !important;
  color:#fff !important;
  content:"Tenente do clã" !important;
  display:inline-block !important;
  font-size:10px !important;
  font-style:normal !important;
  font-weight:700 !important;
  left:-40px !important;
  padding:2px !important;
  position:absolute !important;
  white-space:nowrap !important;
  z-index:1 !important;
}

/*Aspirante*/
a[href*="/u"] span[style="color:#1B7B9E"] strong {
  position:relative !important;
}
a[href*="/u"] span[style="color:#8FF7BF"] strong:hover:after{
  background-color:#1B7B9E !important;
  border-radius:5px !important;
  bottom:15px !important;
  color:#fff !important;
  content:"Aspirante do clã" !important;
  display:inline-block !important;
  font-size:10px !important;
  font-style:normal !important;
  font-weight:700 !important;
  left:-40px !important;
  padding:2px !important;
  position:absolute !important;
  white-space:nowrap !important;
  z-index:1 !important;
}

/*Agente*/
a[href*="/u"] span[style="color:#1B7B9E"] strong {
  position:relative !important;
}
a[href*="/u"] span[style="color:#1B7B9E"] strong:hover:after{
  background-color:#1B7B9E !important;
  border-radius:5px !important;
  bottom:15px !important;
  color:#fff !important;
  content:"Agente do clã" !important;
  display:inline-block !important;
  font-size:10px !important;
  font-style:normal !important;
  font-weight:700 !important;
  left:-40px !important;
  padding:2px !important;
  position:absolute !important;
  white-space:nowrap !important;
  z-index:1 !important;
}

/*Espião*/
a[href*="/u"] span[style="color:#6800F0"] strong {
  position:relative !important;
}
a[href*="/u"] span[style="color:#6800F0"] strong:hover:after{
  background-color:#6800F0 !important;
  border-radius:5px !important;
  bottom:15px !important;
  color:#fff !important;
  content:"Espião do clã" !important;
  display:inline-block !important;
  font-size:10px !important;
  font-style:normal !important;
  font-weight:700 !important;
  left:-40px !important;
  padding:2px !important;
  position:absolute !important;
  white-space:nowrap !important;
  z-index:1 !important;
}

/*Organizador*/
a[href*="/u"] span[style="color:#F07000"] strong {
  position:relative !important;
}
a[href^="/u"] span[style^="color:#FFA200"]:hover:after {
    background-color: #FFA200;
    content: "Fundador";
    padding: 5px;
    border-radius: 5px;
    height: max-content;
    width: max-content;
    position: absolute;
    margin-top: -28px;
    margin-left: -52px;
    color: #fff!important;
    font-weight: bold;
}
}
a.mainmenu[href="/faq"]{
display: none !important;
}
a.mainmenu[href="/calendar"]{
display: none !important;
}
}
/*Remover tabela*/
#preview .postbody table, #preview .postbody td, div[class*='post--'] .postbody table, div[class*='post--'] .postbody td {
    border: none !important;
    border-spacing: 0;
}
a[href^="/u"] span[style$="#1809f4"]:hover:after {
    background-color: #1809f4;
    content: "Fundador";
    padding: 5px;
    border-radius: 5px;
    height: max-content;
    width: max-content;
    position: absolute;
    margin-top: -28px;
    margin-left: -52px;
    color: #fff!important;
    font-weight: bold;
}

Código:


/* Posição menu */
div#headerbar-top:not(.is-sticky) {
    margin-top: 150px;
}
/* Banner */
a#logo img[src="https://i.imgur.com/4aV029Y.png"]
{
  display: none;
}
 
.headerbar {
    background-image: url(https://imgur.com/zeK7AwG.gif);
    background-size: cover;
    height: 220px
}
/* Campo do avatar */
.postprofile {
    text-align: center;
}
.row2 {background-color: #ffffff!important;}
/* Avatar quadrado */
.postprofile-avatar img {
    border: 5px solid #eee;
    border-radius: 2px;
    height: auto;
    max-height: 280px;
    max-width: 180px;
    width: auto;
}
/* Centralizar perfis */
dd.postprofile-contact {
    display: inline-block;
    vertical-align: middle;
}
  /* Legenda */
.block-footer {
    border-color: rgba(0,0,0,0.05);
    border-radius: 0 0 3px 3px;
    border-style: solid;
    border-width: 1px 0 0;
    margin: 18px -18px -18px;
    font-size: 0px;
    padding: 10px 8px 7px 5px;
    text-align: center;
}
.block-footer b {
    font-size: 13px;
}
.block-footer strong {
    display:none;
}
.block-footer a {
  font-size: 14px;
  font-style: normal;
 
  margin-right: 15px;
  transition: .3s;
}
.block-footer a:hover {
  background: #ddd;
  padding: 12px 10px 9px;
}
/* Linha atrás do perfil */
.post-head {
    border-top-width: 0px;
    border-bottom-width: 1px;
    border-color: #202224;
}
/*Categorias Detalhes*/
ul.topiclist.forums {
    padding: 5px;
}
li.row {
    padding: 5px;
    background-color: #Fff;
    border: 0px;
    border-left: 5px solid #00008B;
    border-radius: 0;
}
li.row dd {
    border: 0px;
}
li.row {
      margin-bottom: 5px!important;
}
ul.topiclist.bg_none {
    background: #00008B;
}
li.row {
    padding: 0px;
}
 dd.dterm {
    padding-bottom: 0 !important;
}
/* Categorias*/
ul.forums {
    background-color: #ffffff;
}
ul.forums .posts:after {
    content: 'mensagens';
}
ul.forums .topics:after {
    content: 'tópicos';
}
.forabg .topiclist .header {
    border-bottom: 3px solid #00008B;
}
/*Diretor*/
a[href*="/u"] span[style="color:#0015FF"] strong {
  position:relative !important;
}
a[href*="/u"] span[style="color:#0015FF"] strong:hover:after{
  background-color:#0015FF !important;
  border-radius:5px !important;
  bottom:15px !important;
  color:#fff !important;
  content:"Diretor do clã" !important;
  display:inline-block !important;
  font-size:10px !important;
  font-style:normal !important;
  font-weight:700 !important;
  left:-40px !important;
  padding:2px !important;
  position:absolute !important;
  white-space:nowrap !important;
  z-index:1 !important;
}
 
/*Inteligência*/
a[href*="/u"] span[style="color:#00F010"] strong {
  position:relative !important;
}
a[href*="/u"] span[style="color:#00F010"] strong:hover:after{
  background-color: #00F010 !important;
  border-radius:5px !important;
  bottom:15px !important;
  color:#fff !important;
  content:"Inteligência do clã" !important;
  display:inline-block !important;
  font-size:10px !important;
  font-style:normal !important;
  font-weight:700 !important;
  left:-40px !important;
  padding:2px !important;
  position:absolute !important;
  white-space:nowrap !important;
  z-index:1 !important;
}
 
/*Corregedor*/
a[href*="/u"] span[style="color:#00B0F0"] strong {
  position:relative !important;
}
a[href*="/u"] span[style="color:#00B0F0"] strong:hover:after{
  background-color:#00B0F0 !important;
  border-radius:5px !important;
  bottom:15px !important;
  color:#fff !important;
  content:"Corregedor do clã" !important;
  display:inline-block !important;
  font-size:10px !important;
  font-style:normal !important;
  font-weight:700 !important;
  left:-40px !important;
  padding:2px !important;
  position:absolute !important;
  white-space:nowrap !important;
  z-index:1 !important;
}
 
/*Tenente*/
a[href*="/u"] span[style="color:#F00000"] strong {
  position:relative !important;
}
a[href*="/u"] span[style="color:#F00000"] strong:hover:after{
  background-color:#F00000 !important;
  border-radius:5px !important;
  bottom:15px !important;
  color:#fff !important;
  content:"Tenente do clã" !important;
  display:inline-block !important;
  font-size:10px !important;
  font-style:normal !important;
  font-weight:700 !important;
  left:-40px !important;
  padding:2px !important;
  position:absolute !important;
  white-space:nowrap !important;
  z-index:1 !important;
}
 
/*Aspirante*/
a[href*="/u"] span[style="color:#1B7B9E"] strong {
  position:relative !important;
}
a[href*="/u"] span[style="color:#8FF7BF"] strong:hover:after{
  background-color:#1B7B9E !important;
  border-radius:5px !important;
  bottom:15px !important;
  color:#fff !important;
  content:"Aspirante do clã" !important;
  display:inline-block !important;
  font-size:10px !important;
  font-style:normal !important;
  font-weight:700 !important;
  left:-40px !important;
  padding:2px !important;
  position:absolute !important;
  white-space:nowrap !important;
  z-index:1 !important;
}
 
/*Agente*/
a[href*="/u"] span[style="color:#1B7B9E"] strong {
  position:relative !important;
}
a[href*="/u"] span[style="color:#1B7B9E"] strong:hover:after{
  background-color:#1B7B9E !important;
  border-radius:5px !important;
  bottom:15px !important;
  color:#fff !important;
  content:"Agente do clã" !important;
  display:inline-block !important;
  font-size:10px !important;
  font-style:normal !important;
  font-weight:700 !important;
  left:-40px !important;
  padding:2px !important;
  position:absolute !important;
  white-space:nowrap !important;
  z-index:1 !important;
}
 
/*Espião*/
a[href*="/u"] span[style="color:#6800F0"] strong {
  position:relative !important;
}
a[href*="/u"] span[style="color:#6800F0"] strong:hover:after{
  background-color:#6800F0 !important;
  border-radius:5px !important;
  bottom:15px !important;
  color:#fff !important;
  content:"Espião do clã" !important;
  display:inline-block !important;
  font-size:10px !important;
  font-style:normal !important;
  font-weight:700 !important;
  left:-40px !important;
  padding:2px !important;
  position:absolute !important;
  white-space:nowrap !important;
  z-index:1 !important;
}
 
/*Organizador*/
a[href*="/u"] span[style="color:#F07000"] strong {
  position:relative !important;
}
a[href^="/u"] span[style^="color:#FFA200"]:hover:after {
    background-color: #FFA200;
    content: "Fundador";
    padding: 5px;
    border-radius: 5px;
    height: max-content;
    width: max-content;
    position: absolute;
    margin-top: -28px;
    margin-left: -52px;
    color: #fff!important;
    font-weight: bold;
}
a.mainmenu[href="/faq"]{
display: none !important;
}
a.mainmenu[href="/calendar"]{
display: none !important;
}
/*Remover tabela*/
#preview .postbody table, #preview .postbody td, div[class*='post--'] .postbody table, div[class*='post--'] .postbody td {
    border: none !important;
    border-spacing: 0;
}
a[href^="/u"] span[style$="#1809f4"]:hover:after {
    background-color: #1809f4;
    content: "Fundador";
    padding: 5px;
    border-radius: 5px;
    height: max-content;
    width: max-content;
    position: absolute;
    margin-top: -28px;
    margin-left: -52px;
    color: #fff!important;
    font-weight: bold;
}


Wusthy escreveu:Olá @OneLife

Modifique toda sua Folha de estilo (CSS) para a seguinte folha:

Código:


/* Posição menu */
div#headerbar-top:not(.is-sticky) {
    margin-top: 150px;
}
/* Banner */
a#logo img[src="https://i.imgur.com/4aV029Y.png"]
{
  display: none;
}
 
.headerbar {
    background-image: url(https://imgur.com/zeK7AwG.gif);
    background-size: cover;
    height: 220px
}
/* Campo do avatar */
.postprofile {
    text-align: center;
}
.row2 {background-color: #ffffff!important;}
/* Avatar quadrado */
.postprofile-avatar img {
    border: 5px solid #eee;
    border-radius: 2px;
    height: auto;
    max-height: 280px;
    max-width: 180px;
    width: auto;
}
/* Centralizar perfis */
dd.postprofile-contact {
    display: inline-block;
    vertical-align: middle;
}
  /* Legenda */
.block-footer {
    border-color: rgba(0,0,0,0.05);
    border-radius: 0 0 3px 3px;
    border-style: solid;
    border-width: 1px 0 0;
    margin: 18px -18px -18px;
    font-size: 0px;
    padding: 10px 8px 7px 5px;
    text-align: center;
}
.block-footer b {
    font-size: 13px;
}
.block-footer strong {
    display:none;
}
.block-footer a {
  font-size: 14px;
  font-style: normal;
 
  margin-right: 15px;
  transition: .3s;
}
.block-footer a:hover {
  background: #ddd;
  padding: 12px 10px 9px;
}
/* Linha atrás do perfil */
.post-head {
    border-top-width: 0px;
    border-bottom-width: 1px;
    border-color: #202224;
}
/*Categorias Detalhes*/
ul.topiclist.forums {
    padding: 5px;
}
li.row {
    padding: 5px;
    background-color: #Fff;
    border: 0px;
    border-left: 5px solid #00008B;
    border-radius: 0;
}
li.row dd {
    border: 0px;
}
li.row {
      margin-bottom: 5px!important;
}
ul.topiclist.bg_none {
    background: #00008B;
}
li.row {
    padding: 0px;
}
 dd.dterm {
    padding-bottom: 0 !important;
}
/* Categorias*/
ul.forums {
    background-color: #ffffff;
}
ul.forums .posts:after {
    content: 'mensagens';
}
ul.forums .topics:after {
    content: 'tópicos';
}
.forabg .topiclist .header {
    border-bottom: 3px solid #00008B;
}
/*Diretor*/
a[href*="/u"] span[style="color:#0015FF"] strong {
  position:relative !important;
}
a[href*="/u"] span[style="color:#0015FF"] strong:hover:after{
  background-color:#0015FF !important;
  border-radius:5px !important;
  bottom:15px !important;
  color:#fff !important;
  content:"Diretor do clã" !important;
  display:inline-block !important;
  font-size:10px !important;
  font-style:normal !important;
  font-weight:700 !important;
  left:-40px !important;
  padding:2px !important;
  position:absolute !important;
  white-space:nowrap !important;
  z-index:1 !important;
}
 
/*Inteligência*/
a[href*="/u"] span[style="color:#00F010"] strong {
  position:relative !important;
}
a[href*="/u"] span[style="color:#00F010"] strong:hover:after{
  background-color: #00F010 !important;
  border-radius:5px !important;
  bottom:15px !important;
  color:#fff !important;
  content:"Inteligência do clã" !important;
  display:inline-block !important;
  font-size:10px !important;
  font-style:normal !important;
  font-weight:700 !important;
  left:-40px !important;
  padding:2px !important;
  position:absolute !important;
  white-space:nowrap !important;
  z-index:1 !important;
}
 
/*Corregedor*/
a[href*="/u"] span[style="color:#00B0F0"] strong {
  position:relative !important;
}
a[href*="/u"] span[style="color:#00B0F0"] strong:hover:after{
  background-color:#00B0F0 !important;
  border-radius:5px !important;
  bottom:15px !important;
  color:#fff !important;
  content:"Corregedor do clã" !important;
  display:inline-block !important;
  font-size:10px !important;
  font-style:normal !important;
  font-weight:700 !important;
  left:-40px !important;
  padding:2px !important;
  position:absolute !important;
  white-space:nowrap !important;
  z-index:1 !important;
}
 
/*Tenente*/
a[href*="/u"] span[style="color:#F00000"] strong {
  position:relative !important;
}
a[href*="/u"] span[style="color:#F00000"] strong:hover:after{
  background-color:#F00000 !important;
  border-radius:5px !important;
  bottom:15px !important;
  color:#fff !important;
  content:"Tenente do clã" !important;
  display:inline-block !important;
  font-size:10px !important;
  font-style:normal !important;
  font-weight:700 !important;
  left:-40px !important;
  padding:2px !important;
  position:absolute !important;
  white-space:nowrap !important;
  z-index:1 !important;
}
 
/*Aspirante*/
a[href*="/u"] span[style="color:#1B7B9E"] strong {
  position:relative !important;
}
a[href*="/u"] span[style="color:#8FF7BF"] strong:hover:after{
  background-color:#1B7B9E !important;
  border-radius:5px !important;
  bottom:15px !important;
  color:#fff !important;
  content:"Aspirante do clã" !important;
  display:inline-block !important;
  font-size:10px !important;
  font-style:normal !important;
  font-weight:700 !important;
  left:-40px !important;
  padding:2px !important;
  position:absolute !important;
  white-space:nowrap !important;
  z-index:1 !important;
}
 
/*Agente*/
a[href*="/u"] span[style="color:#1B7B9E"] strong {
  position:relative !important;
}
a[href*="/u"] span[style="color:#1B7B9E"] strong:hover:after{
  background-color:#1B7B9E !important;
  border-radius:5px !important;
  bottom:15px !important;
  color:#fff !important;
  content:"Agente do clã" !important;
  display:inline-block !important;
  font-size:10px !important;
  font-style:normal !important;
  font-weight:700 !important;
  left:-40px !important;
  padding:2px !important;
  position:absolute !important;
  white-space:nowrap !important;
  z-index:1 !important;
}
 
/*Espião*/
a[href*="/u"] span[style="color:#6800F0"] strong {
  position:relative !important;
}
a[href*="/u"] span[style="color:#6800F0"] strong:hover:after{
  background-color:#6800F0 !important;
  border-radius:5px !important;
  bottom:15px !important;
  color:#fff !important;
  content:"Espião do clã" !important;
  display:inline-block !important;
  font-size:10px !important;
  font-style:normal !important;
  font-weight:700 !important;
  left:-40px !important;
  padding:2px !important;
  position:absolute !important;
  white-space:nowrap !important;
  z-index:1 !important;
}
 
/*Organizador*/
a[href*="/u"] span[style="color:#F07000"] strong {
  position:relative !important;
}
a[href^="/u"] span[style^="color:#FFA200"]:hover:after {
    background-color: #FFA200;
    content: "Fundador";
    padding: 5px;
    border-radius: 5px;
    height: max-content;
    width: max-content;
    position: absolute;
    margin-top: -28px;
    margin-left: -52px;
    color: #fff!important;
    font-weight: bold;
}
a.mainmenu[href="/faq"]{
display: none !important;
}
a.mainmenu[href="/calendar"]{
display: none !important;
}
/*Remover tabela*/
#preview .postbody table, #preview .postbody td, div[class*='post--'] .postbody table, div[class*='post--'] .postbody td {
    border: none !important;
    border-spacing: 0;
}
a[href^="/u"] span[style$="#1809f4"]:hover:after {
    background-color: #1809f4;
    content: "Fundador";
    padding: 5px;
    border-radius: 5px;
    height: max-content;
    width: max-content;
    position: absolute;
    margin-top: -28px;
    margin-left: -52px;
    color: #fff!important;
    font-weight: bold;
}


Atenciosamente,
Wusthy.