Informações de sub-fórum em hover

Detalhes da questão

Endereço do fórum: brasilplayfreedomofc.forumeiros.com/forum
Versão do fórum: PunBB

Descrição

Eu gostaria de coloca essa contagm de tópico e mensagem: https://imgur.com/pgua4xn quando passa o mouse em cima ela aparece.

Bom dia,
olhe este tópico:
https://ajuda.forumeiros.com/t71749-tutorial-visualizar-informacoes-de-sub-foruns-em-modo-hover

Atenciosamente,
Luig.

Esse efeito é diferente, eu mostra o titulo do tópico e não a quantidade de post. E eu gostaria como a da imgem, no caso a desse fórum:
maisweb.forumais.com

Olá,
você leu o tópico atentamente? Na verdade e o mesmo efeito usado, quando passa o mouse sobre a categoria ou a área aparece a quantidade de mensagens é tópicos é não o título do tópico onde viu isso?
Confere:

Até mais.

Vim, lir e fiz, porém o meu não aparece e deixei ativo, casos vc passe o mouse emcima do titulo do tópico, vc ver o efeito q aparece.

Olá, troque seu index_box por este:

Código:

<div class="pun-crumbs">
  <p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
  <!-- BEGIN tablehead -->
      <div class="main-head">
        <div class="page-title">{catrow.tablehead.L_FORUM}</div>
      </div>
      <div class="main-content">
        <table cellspacing="0" class="table">
            <thead>
              <tr>
<th class="tcl">{L_FORUM}</th>
<th class="tc2"></th>
<th class="tc3"></th>
<th class="tcr">{L_LASTPOST}</th>
              </tr>
            </thead>
            <tbody class="statused">
  <!-- END tablehead -->
 
  <!-- BEGIN forumrow -->
              <tr>
                  <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
                    <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </span>
                    <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                    <div class="hover_stats"><div class="idx_stats">Temos <b>{catrow.forumrow.TOPICS}</b> topicos e <b>{catrow.forumrow.POSTS}</b> mensagens </div></div>
 <br />
                    <br />
                    {catrow.forumrow.FORUM_DESC}
                    <!-- BEGIN switch_moderators_links -->
                    <br />
                    {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                    <!-- END switch_moderators_links -->
                    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                    <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                  </td>
<td class="tc2"></td>
<td class="tc3"></td>
<td class="tcr">
                    <span>
                    <!-- BEGIN switch_topic_title -->
                    <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                    <!-- END switch_topic_title -->
                    {catrow.forumrow.USER_LAST_POST}
                    </span>
                  </td>
              </tr>
  <!-- END forumrow -->
 
  <!-- BEGIN tablefoot -->
            </tbody>
        </table>
      </div>
  <!-- END tablefoot -->
<!-- END catrow -->
</div>
 
<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
  <ul>
      <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
      <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
      <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
  </ul>
  <!-- BEGIN switch_delete_cookies -->
  <p class="right">
      <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
  </p>
  <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->
<style>
  .idx_stats {margin-left:300px;}
      table > tbody > tr > td.tcl > img {margin-left:50px;}
        table > tbody > tr > td.tcl > h2 > a , table > tbody > tr > td.tcl > h3 > a {margin-left:50px;}
  tr:hover .hover_stats {
display: inline;
}
.hover_stats {
display: none;
position: absolute;
}
.stats_arrow {
margin-left: 5px;
margin-right: -1px;
position: relative;
margin-top: -1px;
}
.idx_stats {
background: #424242;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: white;
font-size: 10px;
padding: 3px 5px;
display: inline;
}
</style>

Até mais.

Olá while, desculpe a demora para responder, não teria como coloca desse mesmo estilo não? maisweb.forumais.com esse é mais bonito

Olá!
Troque sua index_box por está:

Código:

<div class="pun-crumbs">
  <p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
  <!-- BEGIN tablehead -->
      <div class="main-head">
        <div class="page-title">{catrow.tablehead.L_FORUM}</div>
      </div>
      <div class="main-content">
        <table cellspacing="0" class="table">
            <thead>
              <tr>
<th class="tcl">{L_FORUM}</th>
<th class="tc2"></th>
<th class="tc3"></th>
<th class="tcr">{L_LASTPOST}</th>
              </tr>
            </thead>
            <tbody class="statused">
  <!-- END tablehead -->
 
  <!-- BEGIN forumrow -->
              <tr>
                  <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
                    <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </span>
                    <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                    <div class="hover_stats"><div class="idx_stats">Tópicos <b>{catrow.forumrow.TOPICS}</b> - <b>{catrow.forumrow.POSTS}</b> Respostas </div></div>
 <br />
                    <br />
                    {catrow.forumrow.FORUM_DESC}
                    <!-- BEGIN switch_moderators_links -->
                    <br />
                    {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                    <!-- END switch_moderators_links -->
                    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                    <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                  </td>
<td class="tc2"></td>
<td class="tc3"></td>
<td class="tcr">
                    <span>
                    <!-- BEGIN switch_topic_title -->
                    <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                    <!-- END switch_topic_title -->
                    {catrow.forumrow.USER_LAST_POST}
                    </span>
                  </td>
              </tr>
  <!-- END forumrow -->
 
  <!-- BEGIN tablefoot -->
            </tbody>
        </table>
      </div>
  <!-- END tablefoot -->
<!-- END catrow -->
</div>
 
<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
  <ul>
      <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
      <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
      <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
  </ul>
  <!-- BEGIN switch_delete_cookies -->
  <p class="right">
      <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
  </p>
  <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->
<style>
  .idx_stats {margin-left:300px;}
      table > tbody > tr > td.tcl > img {margin-left:50px;}
        table > tbody > tr > td.tcl > h2 > a , table > tbody > tr > td.tcl > h3 > a {margin-left:50px;}
  tr:hover .hover_stats {
display: inline;
}
.hover_stats {
display: none;
position: absolute;
}
.stats_arrow {
margin-left: 5px;
margin-right: -1px;
position: relative;
margin-top: -1px;
}
.idx_stats {
background: #424242;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: white;
font-size: 10px;
padding: 3px 5px;
display: inline;
}
</style>

Atenciosamente,
Luig.

Não resultou o efeito esperado, e ainda bugou.
https://imgur.com/W4OiQM4
 Teria como também coloca quando não tive tópico aparecesse na categoria '' Não há post para visualizar'' como está?
https://imgur.com/jp21S1p

Olá,
troque por está:

Código:

<div class="pun-crumbs">
  <p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
  <!-- BEGIN tablehead -->
      <div class="main-head">
        <div class="page-title">{catrow.tablehead.L_FORUM}</div>
      </div>
      <div class="main-content">
        <table cellspacing="0" class="table">
            <thead>
              <tr>
<th class="tcl">{L_FORUM}</th>
<th class="tc2"></th>
<th class="tc3"></th>
<th class="tcr">{L_LASTPOST}</th>
              </tr>
            </thead>
            <tbody class="statused">
  <!-- END tablehead -->
 
  <!-- BEGIN forumrow -->
              <tr>
                  <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
                    <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </span>
                    <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                    <div class="hover_stats"><div class="idx_stats"><b>{catrow.forumrow.TOPICS}</b> Tópicos - <b>{catrow.forumrow.POSTS}</b> Respostas </div></div>
 <br />
                    <br />
                    {catrow.forumrow.FORUM_DESC}
                    <!-- BEGIN switch_moderators_links -->
                    <br />
                    {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                    <!-- END switch_moderators_links -->
                    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                    <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                  </td>
<td class="tc2"></td>
<td class="tc3"></td>
<td class="tcr">
                    <span>
                    <!-- BEGIN switch_topic_title -->
                    <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                    <!-- END switch_topic_title -->
                    {catrow.forumrow.USER_LAST_POST}
                    </span>
                  </td>
              </tr>
  <!-- END forumrow -->
 
  <!-- BEGIN tablefoot -->
            </tbody>
        </table>
      </div>
  <!-- END tablefoot -->
<!-- END catrow -->
</div>
 
<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
  <ul>
      <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
      <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
      <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
  </ul>
  <!-- BEGIN switch_delete_cookies -->
  <p class="right">
      <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
  </p>
  <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->
<style>
  .idx_stats {margin-left:300px;}
      table > tbody > tr > td.tcl > img {margin-left:50px;}
        table > tbody > tr > td.tcl > h2 > a , table > tbody > tr > td.tcl > h3 > a {margin-left:50px;}
  tr:hover .hover_stats {
display: inline;
}
.hover_stats {
display: none;
position: absolute;
}
.stats_arrow {
margin-left: 5px;
margin-right: -1px;
position: relative;
margin-top: -1px;
}
.idx_stats {
background: #424242;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: white;
font-size: 10px;
padding: 3px 5px;
display: inline;
}
</style>

Até mais.

Ficou bom, porém deu o mesmo efeito. Eu gostaria como esse http://maisweb.forumeiro.com/ o mesmo efeito e estilo

É uma duvida por tópico, e como assim? é o mesmo estilo do maisweb.

O que realmente deseja autor? Seja claro e direto por favor.

Não temos permissão do RafaelS. para passar o código , deixei de forma parecida, não se agradou? então diga por favor o que mudar ao invez de dizer: Faz como desse fórum.

Até mais.

Bom, eu quero esse balão ae, com o mesmo movimento e estilo, no caso o estilo é esse: https://imgur.com/VpBxl1x, a movimentação é essa que ele vai pra frente e pra tras.

Acho que o código não seja dele, pois tem em vários fóruns, como esses:

wasdforum.forumeiros.com
http://maisweb.forumeiro.com/

caso eu lembre dos outros fóruns vou posta aqui;

Hum, crie um novo javascript com esse código (investimento no indice)

Código:

jQuery(function(){jQuery('table.table tbody.statused tr').mouseenter(function(){jQuery(this).find('.hover_stats').fadeIn('slow').animate({left:'290px'},200).animate({left:'300px'},200)});jQuery('table.table tbody.statused tr').mouseleave(function(){jQuery(this).find('.hover_stats').fadeOut('slow').animate({left:'300px'},200)})});

Até mais.

Certo, agora não teria como deixa o balão com essa aparencia? https://imgur.com/VpBxl1x

Você não tem jeito mesmo em
Troque seu template index_box por este:

Código:

<div class="pun-crumbs">
    
   <p class="crumbs">
      <a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong>
   </p>
</div>
<div class="main">
   <!-- BEGIN catrow --> 
   <!-- BEGIN tablehead -->     
   <div class="main-head">
             
      <div class="page-title">
         {catrow.tablehead.L_FORUM}
      </div>
           
   </div>
        
   <div class="main-content">
             
      <table class="table" cellspacing="0">
                    
         <thead>
                         
            <tr>
               <th class="tcl">
                  {L_FORUM}
               </th>
               <th class="tc2">
               </th>
               <th class="tc3">
               </th>
               <th class="tcr">
                  {L_LASTPOST}
               </th>
                            
            </tr>
                       
         </thead>
                    
         <tbody class="statused">
             
            <!-- END tablehead -->   
            <!-- BEGIN forumrow -->             
            <tr>
                                
               <td style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};" class="tcl">
                                      <span style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};" class="status">                        <img alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />                    </span>                    <h{catrow.forumrow.level} class="hierarchy"><a class="forumtitle" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.level}>                   
                  <div class="hover_stats">
                     <img class="stats_arrow" alt="" style="padding: 0px !important" src="http://i79.servimg.com/u/f79/18/24/85/15/hover_10.gif" />
                     <div class="idx_stats">
                        <strong>{catrow.forumrow.TOPICS}</strong> Tópicos - <strong>{catrow.forumrow.POSTS}</strong> Respostas
                     </div>
                  </div>
                   <br />                    <br />                    {catrow.forumrow.FORUM_DESC}                   
                  <!-- BEGIN switch_moderators_links -->                    <br />                    {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}                   
                  <!-- END switch_moderators_links -->                    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}                    <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}                 
               </td>
               <td class="tc2">
               </td>
               <td class="tc3">
               </td>
               <td class="tcr">
                                      <span>                   
                     <!-- BEGIN switch_topic_title -->                    <a title="{catrow.forumrow.LATEST_TOPIC_TITLE}" href="{catrow.forumrow.U_LATEST_TOPIC}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />                   
                     <!-- END switch_topic_title -->                    {catrow.forumrow.USER_LAST_POST}                    </span>                 
               </td>
                            
            </tr>
             
            <!-- END forumrow -->   
            <!-- BEGIN tablefoot -->           
         </tbody>
                
      </table>
           
   </div>
    
   <!-- END tablefoot -->
   <!-- END catrow -->
</div>
 
<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
    
   <ul>
           
      <li>
         <a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>
      </li>
           
      <li>
         <a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
      </li>
           
      <li>
         <a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
      </li>
       
   </ul>
    
   <!-- BEGIN switch_delete_cookies --> 
   <p class="right">
            <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a> 
   </p>
    
   <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index --><style>
  .idx_stats {margin-left:300px;}
      table > tbody > tr > td.tcl > img {margin-left:50px;}
        table > tbody > tr > td.tcl > h2 > a , table > tbody > tr > td.tcl > h3 > a {margin-left:50px;}
  tr:hover .hover_stats {
display: inline;
}
.hover_stats {
display: none;
position: absolute;
}
.stats_arrow {
margin-left: 5px;
margin-right: -1px;
position: relative;
margin-top: -1px;
}
.idx_stats {
background: #424242;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: white;
font-size: 10px;
padding: 3px 5px;
display: inline;
}
 table > tbody > tr > td.tcl > div > img {margin-left:296px;position:absolute;margin-top:4px;}
</style>

Até mais.