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


Pesquisa de Satisfação
Queremos saber a sua opinião sobre os nossos serviços. Clique nesta vinheta e preencha este inquérito.

Login

Esqueci minha senha

Últimos assuntos
» PROBLEMA COM REGISTRO DE USUARIO
Hoje à(s) 20:34 por Shek Crowley

» Personalizar perfil
Hoje à(s) 20:33 por Eden

» Problemas para ativar o SCEditor
Hoje à(s) 20:27 por Shek Crowley

» Gostaria do Codigo dessa pàgina
Hoje à(s) 19:47 por Odair Composições

» Publicidade em cima do cabelaho
Hoje à(s) 18:30 por juleic1123

» Java Ultimos Temas
Hoje à(s) 17:41 por giancamposm

» Bug na Pagina HTML
Hoje à(s) 17:31 por xBreninho_.

LiveStream TV Forumeiros - #Forumeiros
Perdi minha senha!
Obter senha

Nota: use se tiver perdido acesso ao seu painel de controle.

Parceiros Forumeiros
Quem está conectado
112 usuários online :: 7 usuários cadastrados, 1 Invisível e 104 Visitantes :: 2 Motores de busca

Apollo, Eden, Kyo Panda, lucasmcard, Shek Crowley, Sowisker, xBreninho_.

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Efeito hover

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

Resolvido Efeito hover

Mensagem por Luiis_. em Sex 12 Fev 2016 - 3:15

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

Luiis_.
Nível 8

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

http://...

O autor desta mensagem foi removido do fórum - Ver a mensagem

Resolvido Re: Efeito hover

Mensagem por Fraise em Sex 12 Fev 2016 - 4:00

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

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4973
Pontos Ativos : 7161

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

O autor desta mensagem foi removido do fórum - Ver a mensagem

Resolvido Re: Efeito hover

Mensagem por Fraise em Sex 12 Fev 2016 - 4:34

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

Até mais.
Fraise

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4973
Pontos Ativos : 7161

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

Resolvido Re: Efeito hover

Mensagem por RafaelS. em Sex 12 Fev 2016 - 4:39

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

RafaelS.
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3098
Pontos Ativos : 4947

http://maisforum.forumeiros.com

Resolvido Re: Efeito hover

Mensagem por Luiis_. em Sex 12 Fev 2016 - 13:19

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

Luiis_.
Nível 8

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

http://...

Resolvido Re: Efeito hover

Mensagem por Fraise em Sex 12 Fev 2016 - 13:21

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

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4973
Pontos Ativos : 7161

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

Resolvido Re: Efeito hover

Mensagem por Luiis_. em Sex 12 Fev 2016 - 14:12

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

Luiis_.
Nível 8

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

http://...

Resolvido Re: Efeito hover

Mensagem por Fraise em Sex 12 Fev 2016 - 23:25

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

Até mais.

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4973
Pontos Ativos : 7161

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

Resolvido Re: Efeito hover

Mensagem por Luiis_. em Sab 13 Fev 2016 - 12:28

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

Luiis_.
Nível 8

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

http://...

Resolvido Re: Efeito hover

Mensagem por Luiis_. em Dom 14 Fev 2016 - 14:09

UP

Luiis_.
Nível 8

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

http://...

Resolvido Re: Efeito hover

Mensagem por RafaelS. em Dom 14 Fev 2016 - 19:26

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.

RafaelS.
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3098
Pontos Ativos : 4947

http://maisforum.forumeiros.com

Resolvido Re: Efeito hover

Mensagem por Luiis_. em Dom 14 Fev 2016 - 19:28

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

Luiis_.
Nível 8

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

http://...

Resolvido Re: Efeito hover

Mensagem por RafaelS. em Dom 14 Fev 2016 - 19:30

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

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

RafaelS.
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3098
Pontos Ativos : 4947

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
Fórum dos Fóruns - Ajuda mútua para usuários forumeiros
on
Fórum grátis: interajuda aos usuários forumeiros. Criar e administrar um fórum. Descubra nossos guias, tutoriais e astúcias no suporte de Forumeiros.
Votações: 5