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

Item: Mostrar quantidade de tópicos e respostas apenas quando passa o mouse.
Rating: 1

por Sonic_BR 22.10.14 2:02

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 ó:
Mostrar quantidade de tópicos e respostas apenas quando passa o mouse. O7hnuII

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

Valeu!

por Daemon 22.10.14 2:06

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

Até!

por Sonic_BR 22.10.14 2:13

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">   <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">   <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;">  <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>  <span>  <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />  {catrow.forumrow.USER_LAST_POST} </span> </td> </tr>   </tbody> </table> </div>   </div>  <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>  <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>  </div>

topics_list_box

Spoiler:

Código::     <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>  <div class="main-head">  <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" />  <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">   <strong>{topics_list_box.row.L_TITLE}</strong>    </tbody> </table> </div> <div class="main-head" style="border-top-left-radius: 15px; border-top-right-radius: 15px;">  <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" / >  <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">  <tr style="background-color: transparent; height: 66px !important;"> <td class="tcl tdtopics  sticky-separator " 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>  <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />   {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>  <br /> <p style="color: #777777">{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION} </p>  </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  sticky-separator " style="padding-left: 35px !important; background: transparent;">  <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>  Ú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>  <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>  </tr>   <tr> <td class="tcl" colspan="4"><strong>{topics_list_box.row.L_NO_TOPICS}</strong></td> </tr>   </tbody> </table> </div> <div class="main-foot clearfix">  <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" />  <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> {S_WATCH_FORUM} <a href="#top">{L_BACK_TO_TOP}</a> </p> </div>  <br />

Flw o/

por [F]lames 22.10.14 12:50

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!

por Sonic_BR 22.10.14 15:36

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:

por [F]lames 22.10.14 23:55

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!