Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
» Mostrar usuário do post
Hoje à(s) 08:27 pm por rlmac

» Como fazer sub entrada?
Hoje à(s) 08:07 pm por Harleen

» Como trasnferir um site do wix para forumeiros?
Hoje à(s) 07:33 pm por Shek

» Best Skins | as melhores skins você encontra aqui.
Hoje à(s) 06:48 pm por Dr.

» Widget melhor do mês não funciona
Hoje à(s) 05:03 pm por Kyo Panda

» Caixa de Login
Hoje à(s) 04:34 pm por iScroll

» (PEDIDO) logo
Hoje à(s) 02:33 pm por APOllO

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Harleen
 
Kyo Panda
 
Shek
 
Luiz
 
APOllO
 
odelgado
 
Kyko
 
mrvisible
 
iScroll
 
rlmac
 

Quem está conectado
249 usuários online :: 9 usuários cadastrados, Nenhum Invisível e 240 Visitantes :: 2 Motores de busca

Holkis, iPlayer, iScroll, IsmaelS., Kyko, Luiz, mrvisible, odelgado, rlmac

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Efeito hover

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

Resolvido Efeito hover

Mensagem por Luiis_. em 12/02/16, 01:15 am

Detalhes da questão


Endereço do fórum: http://luiiswebdesigner.forumeiros.com/
Versão do fórum: PunBB

Descrição


Olá pessoal, bom eu queria que vocês me passasse o efeito hover deste fórum

http://www.surcape.com/

Bom quando passa o mouse em cima do fórum da categoria aparece uma informação de quantas respostas e tópicos fórum criados, eu queria este mesmo efeito se possível ou algo parecido.

Até mais! Mostrando a lingua
avatar

Luiis_.
Nível 8

Masculino
Inscrito dia : 12/07/2015
Mensagens : 123
Pontos Ativos : 198

http://...

Resolvido Re: Efeito hover

Mensagem por HilterHP em 12/02/16, 01:39 am

Olá, para isso precisaremos do seu template index_box
avatar

HilterHP
Nível 10

Masculino
Inscrito dia : 24/02/2014
Mensagens : 257
Pontos Ativos : 409

http://htttp://inativoforumhilter.forumeiros.com

Resolvido Re: Efeito hover

Mensagem por Fraise em 12/02/16, 02:00 am

Boa noite, @Luiis_.

Crie um novo JavaScript com investimento No Índice utilizando o seguinte código:
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)
    })
});

Em seguida, adicione em sua CSS:
Código:
.hover_stats { display:none; position:absolute; }

Deu certo? Muito feliz

Até mais.
Fraise
avatar

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4979
Pontos Ativos : 6634

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Efeito hover

Mensagem por HilterHP em 12/02/16, 02:13 am

Também estava interessado nisso, testei aqui em meu fórum versão PHBB e PUNBB e não resultou.
avatar

HilterHP
Nível 10

Masculino
Inscrito dia : 24/02/2014
Mensagens : 257
Pontos Ativos : 409

http://htttp://inativoforumhilter.forumeiros.com

Resolvido Re: Efeito hover

Mensagem por Fraise em 12/02/16, 02:34 am

Na verdade, eu esqueci que necessito também de fazer uma alteração no index_box. Poderias fornece-lo?

Até mais.
Fraise
avatar

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4979
Pontos Ativos : 6634

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Efeito hover

Mensagem por RafaelS. em 12/02/16, 02:39 am

@HilterHP escreveu:Também estava interessado nisso, testei aqui em meu fórum versão PHBB e PUNBB e não resultou.

@HilterHP,

Caso esteja com a mesma dúvida, por favor crie um novo tópico. Vamos manter a organização, por favor.

Até mais.
avatar

RafaelS.
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3109
Pontos Ativos : 4016

http://maisforum.forumeiros.com

Resolvido Re: Efeito hover

Mensagem por Luiis_. em 12/02/16, 11:19 am

Aqui está index_box

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">
         <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">{L_TOPICS}</th>
                  <th class="tc3">{L_POSTS}</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}>
                     <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">{catrow.forumrow.TOPICS}</td>
                  <td class="tc3">{catrow.forumrow.POSTS}</td>
                  <td class="tcr">
                            <!-- 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}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
   </p>
   <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->
avatar

Luiis_.
Nível 8

Masculino
Inscrito dia : 12/07/2015
Mensagens : 123
Pontos Ativos : 198

http://...

Resolvido Re: Efeito hover

Mensagem por Fraise em 12/02/16, 11:21 am

Olá novamente,

Troque por este:
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">
        <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">{L_TOPICS}</th>
                  <th class="tc3">{L_POSTS}</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}>
                    <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"><div class="hover_stats">{catrow.forumrow.TOPICS}</div></td>
                  <td class="tc3"><div class="hover_stats">{catrow.forumrow.POSTS}</div></td>
                  <td class="tcr">
                            <!-- 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}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
  </p>
  <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->

Salve e publique. Muito feliz

Até mais.
Fraise
avatar

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4979
Pontos Ativos : 6634

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Efeito hover

Mensagem por Luiis_. em 12/02/16, 12:12 pm

Olá fraise está funcionando mais eu queria que retire este efeito, olha onde ela fica inicialmente

http://imgur.com/HpHUFIY

Eu quero que quando passar o mouse em cima já aparece no lugar que deveria aparecer

Até mais Feliz
avatar

Luiis_.
Nível 8

Masculino
Inscrito dia : 12/07/2015
Mensagens : 123
Pontos Ativos : 198

http://...

Resolvido Re: Efeito hover

Mensagem por Fraise em 12/02/16, 09:25 pm

Poderia deixar o efeito ativo em seu fórum para que eu possa averiguar melhor o problema?

Até mais.
avatar

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4979
Pontos Ativos : 6634

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Efeito hover

Mensagem por Luiis_. em 13/02/16, 10:28 am

Olá o código ja se encontra ativo amigo >)
avatar

Luiis_.
Nível 8

Masculino
Inscrito dia : 12/07/2015
Mensagens : 123
Pontos Ativos : 198

http://...

Resolvido Re: Efeito hover

Mensagem por Luiis_. em 14/02/16, 12:09 pm

UP
avatar

Luiis_.
Nível 8

Masculino
Inscrito dia : 12/07/2015
Mensagens : 123
Pontos Ativos : 198

http://...

Resolvido Re: Efeito hover

Mensagem por RafaelS. em 14/02/16, 05:26 pm

Olá!

Troque-o por este:

Código:
<style>
  .stats_arrow {
    margin-left: 150px;
    margin-right: -1px;
    margin-top: -1px;
    position: relative;
}
  .hover_stats {
    position: absolute;
}
  .idx_stats {
    background: #424242;
    border-radius: 3px;
    color: #fff;
    display: inline;
    font-size: 10px;
    padding: 3px 5px;
}
</style>
<script>
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)
    })
});
</script>
    <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">
            <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="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" style="left: 300px; display: none;"><img src="http://i79.servimg.com/u/f79/18/24/85/15/hover_10.gif" style="padding: 0px !important" alt="" class="stats_arrow" style=""><div class="idx_stats">{catrow.forumrow.TOPICS} Tópicos · {catrow.forumrow.POSTS} Mensagens</div></div>   
                   <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="tcr">
                                <!-- 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}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
      </p>
      <!-- END switch_delete_cookies -->
    </div>
    <!-- END switch_on_index -->

Até mais.
avatar

RafaelS.
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3109
Pontos Ativos : 4016

http://maisforum.forumeiros.com

Resolvido Re: Efeito hover

Mensagem por Luiis_. em 14/02/16, 05:28 pm

Olá RafaelS muito obrigado está funcionando perfeitamente, pode fechar até mais Feliz
avatar

Luiis_.
Nível 8

Masculino
Inscrito dia : 12/07/2015
Mensagens : 123
Pontos Ativos : 198

http://...

Resolvido Re: Efeito hover

Mensagem por RafaelS. em 14/02/16, 05:30 pm

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
avatar

RafaelS.
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3109
Pontos Ativos : 4016

http://maisforum.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