Mostrar quantidade de tópicos e respostas apenas quando passa o mouse.

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Mostrar quantidade de tópicos e respostas apenas quando passa o mouse.

Mensagem por Sonic_BR em 21/10/14, 11:02 pm

Olá pessoal!

Eu queria saber se tem como fazer com que a quantidade dos tópicos e respostas apareça apenas quando o mouse está encima dele (não exatamente encima do nome, mas da caixa onde mostra o titulo, a descrição do tópico, etc). Se possível, quero isso na página principal (as categorias) e nos forums (a lista de tópicos)!

Eu tô falando disso ó:

Valeu!


Última edição por Sonic_BR em 22/10/14, 12:36 pm, editado 1 vez(es)
avatar

Sonic_BR
Nível 6

Masculino
Inscrito dia : 13/09/2014
Mensagens : 62
Pontos Ativos : 105

Ver perfil do usuário http://terraria-brasil.forumeiros.com/

Resolvido Re: Mostrar quantidade de tópicos e respostas apenas quando passa o mouse.

Mensagem por Daemon em 21/10/14, 11:06 pm

Peço que deixe aqui o seu template "index_box" para a edição do mesmo.


Até!
avatar

Daemon
Membro do Fórum

Masculino
Inscrito dia : 01/03/2012
Mensagens : 1096
Pontos Ativos : 1688

Ver perfil do usuário http://bestskins.forumeiros.com/

Resolvido Re: Mostrar quantidade de tópicos e respostas apenas quando passa o mouse.

Mensagem por Sonic_BR em 21/10/14, 11:13 pm

Tá rápido ein Daemon, ehaueha!
Vou colocar o topic_list_box também, pra você colocar o mesmo efeito, se puder, é claro o/

index_box:
Spoiler:

Código:
<div class="pun-crumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
 <p class="crumbs"><a href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
 <!-- BEGIN tablehead -->
 <div class="main-head" style="border-top-left-radius: 15px; border-top-right-radius: 15px;">
 <div class="page-title">{catrow.tablehead.L_FORUM}</div>
 </div>
 <div class="main-content">
 <table cellspacing="0" class="table">
 <tbody class="statused">
 <!-- END tablehead -->

 <!-- BEGIN forumrow -->
 <tr style="background: white !important;">
 <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT}; background: transparent !important;">
 <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON}; margin-top: 8px;">
 <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" style="font-size: 1.2em;"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
 <br />
 {catrow.forumrow.FORUM_DESC}
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
 </td>
                                          <td class="tc3" style="font: -webkit-mini-control; font-size: 11px; color: rgb(86, 86, 86); text-shadow: 0px 0px 5px rgba(26, 255, 0, 0.26); padding-left: 50px; background: transparent !important;"><span id="stats_do_forum"><b>{catrow.forumrow.TOPICS}</b> Tópicos<br><b>{catrow.forumrow.POSTS}</b><span/> Respostas</td>
 <td class="tcr" style="padding-left: 90px !important; background: transparent !important;">
                                                     <!-- BEGIN avatar -->
                                                     <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                                                     <!-- END avatar -->

     <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 -->

topics_list_box
Spoiler:

Código:
<!-- BEGIN topics_list_box -->
<!-- BEGIN row -->
<!-- BEGIN header_table -->
 <!-- BEGIN multi_selection -->
 <script type="text/javascript">
 function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
 var all_checked = true;
 for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
 if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
 all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
 }
 }
 document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
 }
 function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
 for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
 if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
 document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
 }
 }
 }
 </script>
 <!-- END multi_selection -->

 <div class="main-head">
 <!-- BEGIN multi_selection -->
 <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
 <!-- END multi_selection -->
 <h1 class="page-title">Tópicos Importantes</h1>
 </div>
 <div class="main-content" style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;">
 <table cellspacing="0" class="table">
 <tbody class="statused">
<!-- END header_table -->

<!-- BEGIN header_row -->
<strong>{topics_list_box.row.L_TITLE}</strong>
<!-- END header_row -->

<!-- BEGIN topic -->
 <!-- BEGIN table_sticky -->
 </tbody>
 </table>
 </div>

 <div class="main-head" style="border-top-left-radius: 15px; border-top-right-radius: 15px;">
 <!-- BEGIN multi_selection -->
 <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" / >
 <!-- END multi_selection -->
 <h1 style="color: #FFF; font-size: 18px; text-align: center; text-shadow: rgba(255,255,255,0.31) 0 0 5px; font-weight: bold;">Tópicos</h1>
 </div>
 <div class="main-content">
 <table cellspacing="0" class="table">
 <tbody class="statused">
 <!-- END table_sticky -->
 <tr style="background-color: transparent; height: 66px !important;">
 <td class="tcl tdtopics <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->" style="background: transparent;">
 <span class="status" style="margin-top: 10px; margin-left: -29px;">
 <img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
 </span>
 <!-- BEGIN single_selection -->
 <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />&nbsp;
 <!-- END single_selection -->
                                {topics_list_box.row.NEWEST_POST_IMG}
 {topics_list_box.row.TOPIC_TYPE}
 <h2 class="topic-title"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}" style="color: #000000">{topics_list_box.row.TOPIC_TITLE}</a></h2>
 {topics_list_box.row.GOTO_PAGE_NEW}
                                <br>
                                <p style="font-size: 10px; position: absolute;">Por {topics_list_box.row.TOPIC_AUTHOR}</p>
 <!-- BEGIN switch_description -->
 <br />
                                <p style="color: #777777">{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}&nbsp;</p>
 <!-- END switch_description -->
 </td>
                        <td class="tc2" style="background-color: transparent; font: -webkit-mini-control; font-size: 11px; color: rgb(86, 86, 86); text-shadow: 0px 0px 5px rgba(26, 255, 0, 0.26); padding-left: 50px !important; position: absolute !important; padding-top: 17px;">
                          <b>{topics_list_box.row.REPLIES}</b> Respostas<br><b>{topics_list_box.row.VIEWS}</b> Visualizações
                          <td/>
                        
 <td class="tcr <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->" style="padding-left: 35px !important; background: transparent;">
                             <!-- BEGIN avatar -->
                             <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
                             <!-- END avatar -->

                             Última resposta por {topics_list_box.row.LAST_POST_AUTHOR} <br>{topics_list_box.row.LAST_POST_TIME} {topics_list_box.row.LAST_POST_IMG}
                        </td>
 <!-- BEGIN multi_selection -->
 <td><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
 <!-- END multi_selection -->
 </tr>
<!-- END topic -->
<!-- BEGIN no_topics -->
<tr>
 <td class="tcl" colspan="4"><strong>{topics_list_box.row.L_NO_TOPICS}</strong></td>
</tr>
<!-- END no_topics -->

<!-- BEGIN bottom -->
 </tbody>
 </table>
 </div>
 <div class="main-foot clearfix">
 <!-- BEGIN multi_selection -->
 <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
 <!-- END multi_selection -->
                <p class="h2" style="margin-top: 3px; font-style: italic; color: black;">Existem atualmente <b>{topics_list_box.row.bottom.COUNT_TOTAL_TOPICS}</b> tópicos neste fórum.</p>
 <p class="options">
 <a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a>&nbsp;{S_WATCH_FORUM}&nbsp;<a href="#top">{L_BACK_TO_TOP}</a>
 </p>
 </div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->

Flw o/
avatar

Sonic_BR
Nível 6

Masculino
Inscrito dia : 13/09/2014
Mensagens : 62
Pontos Ativos : 105

Ver perfil do usuário http://terraria-brasil.forumeiros.com/
  • 0

Resolvido Re: Mostrar quantidade de tópicos e respostas apenas quando passa o mouse.

Mensagem por [F]lames em 22/10/14, 09:50 am

Olá,

Peço que tente apenas adicionar isso em sua Folha de Estilos CSS:
Código:
/* Hover nas categorias */
.pun table.table td.tc3 {
opacity: 0;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.pun table.table tr:hover td.tc3 {
opacity: 1;
}

Passar bem!
avatar

[F]lames
Usuário destaque

Masculino
Inscrito dia : 05/10/2012
Mensagens : 866
Pontos Ativos : 1207

Ver perfil do usuário http://www.bestskins.net/

Resolvido Re: Mostrar quantidade de tópicos e respostas apenas quando passa o mouse.

Mensagem por Sonic_BR em 22/10/14, 12:36 pm

Flames! Fuincionou direitinho cara, brigado mesmo Muito feliz
Toma biscoito pra você também Mostrando a lingua
Spoiler:



Resolvido.

EDIT:

Ei, mas não funciona na lista de tópicos de cada categoria!
Comofas? D:
avatar

Sonic_BR
Nível 6

Masculino
Inscrito dia : 13/09/2014
Mensagens : 62
Pontos Ativos : 105

Ver perfil do usuário http://terraria-brasil.forumeiros.com/

Resolvido Re: Mostrar quantidade de tópicos e respostas apenas quando passa o mouse.

Mensagem por [F]lames em 22/10/14, 08:55 pm

Olá,

Em meu PC está funcionando normalmente, tanto no início do fórum quanto dentro de uma categoria, experimente teclar CTRL + F5 e veja se resolve.

Passar bem!
avatar

[F]lames
Usuário destaque

Masculino
Inscrito dia : 05/10/2012
Mensagens : 866
Pontos Ativos : 1207

Ver perfil do usuário http://www.bestskins.net/

Resolvido Re: Mostrar quantidade de tópicos e respostas apenas quando passa o mouse.

Mensagem por Sonic_BR em 22/10/14, 11:39 pm

Flames, eu já arrumei isso, só esqueci de postar aqui no tópico, euaehuehaueah!
Foi mal mesmo :v

No mais, toma um biscoitinho...
Spoiler:



Resolvido.
avatar

Sonic_BR
Nível 6

Masculino
Inscrito dia : 13/09/2014
Mensagens : 62
Pontos Ativos : 105

Ver perfil do usuário http://terraria-brasil.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum