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
» [Pedido] Banner ®
Hoje à(s) 04:46 pm por mocci

» [PEDIDO] Brasão de Armas
Hoje à(s) 04:17 pm por mocci

» Mudar caixas de usuários online, grupos e aniversariantes
Hoje à(s) 04:16 pm por Kyo Panda

» Construção de Header
Hoje à(s) 04:04 pm por IsmaelS.

» Bug inicial do forum
Hoje à(s) 03:53 pm por Kyo Panda

» Duvidas referente ao sistema pontos
Hoje à(s) 03:50 pm por Kyo Panda

» [Pedido] Ranks
Hoje à(s) 03:16 pm por iScroll

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
314 usuários online :: 14 usuários cadastrados, Nenhum Invisível e 300 Visitantes :: 2 Motores de busca

Czins, GSCode, Hastad, iScroll, IsmaelS., Jefferson105, Ketholy123, Kyo Panda, Lily Vendramini, luan2, mocci, odelgado, ShadowPrince, William_iHarDz

[ Ver toda a lista ]


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

Como faz este efeito?

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

Resolvido Como faz este efeito?

Mensagem por Troubleshoot em 11/01/17, 03:22 pm

Detalhes da questão


Endereço do fórum: http://www.libertytelecomctba.com.br/
Versão do fórum: Invision

Descrição


Olá Comunity!

Eu acessei este site > https://pt.surveymonkey.com/pricing/?ut_source=header e gostei do efeito quando passa o mouse nos "?". Alguém sabe me explicar como faço este efeito? Se possível, gostaria de adiciona-lo digamos no menu.

Muito feliz


Última edição por Troubleshoot em 12/01/17, 10:50 am, editado 1 vez(es)
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2184
Pontos Ativos : 2913

http://guiatecnico.ativo-forum.com/
  • 0

Resolvido Re: Como faz este efeito?

Mensagem por Kyo Panda em 12/01/17, 10:21 am

Olá,

Supomos o seguinte HTML:

Código:
<ul id="fa-custom-menu">
  <li class="fa-box">
    <a href="#">
      Texto <span class="fa-box-trigger">?</span>
    </a>
    <div class="fa-box-message">
      <a href="#" class="fa-box-trigger">X</a>
      O conteúdo da sua caixa de texto aqui.
    </div>
  </li>
</ul>

Adicione ao seu CSS:

Código:
.fa-box {
  position: relative;
}

.fa-box-trigger {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  background-color: #ccc;
  color: #fff;
  margin-left: 10px;
  border-radius: 50%;
  font-size: 10px;
  text-decoration: none;
  vertical-align: middle;
}

.fa-box-message {
  display: none;
  position: absolute;
  border: 5px #333 solid;
  width: 200px;
  padding: 10px 40px 10px 10px;
  border-radius: 5px;
  left: 100%;
  top: -10px;
  margin-left: 20px;
  background: #f9f9f9;
  box-sizing: border-box;
}

.fa-box-message:after {
   right: 100%;
   top: 15px;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
   border-color: transparent;
   border-right-color: #333;
   border-width: 15px;
   margin-top: -15px;
}

.fa-box-open .fa-box-message {
  display: block;
}

.fa-box-message .fa-box-trigger {
  position: absolute;
  margin: 0;
  right: 10px;
  top: 10px;
}

E ao Javascript com Investimento em Todas as páginas:

Código:
/* globals jQuery */

(function($) {
  'use strict';
 
  $(function() {
    $('.fa-box-trigger').on('click', function() {
      $(this)
        .closest('.fa-box')
        .toggleClass('fa-box-open');
    });
  });
}(jQuery));

A caixa aparecerá a direita do elemento .fa-box, logo garanta que esse elemento tenha a largura correta para a caixa não aparecer longe do "?".

o/


Bem-vindo ao Fórum dos Fóruns!
Leia as Regras do Fórum dos Fóruns. Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Kyo Panda — Moderadeiro
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3859
Pontos Ativos : 5080

http://ajuda.forumeiros.com

Resolvido Re: Como faz este efeito?

Mensagem por Troubleshoot em 12/01/17, 10:34 am

Gostei!
Mas, o efeito só surge quando clico sobre o "?". No site, a caixa  aparece apenas ao passar o mouse sobre.

Aproposito vou aproveitar esse  código para fazer aquele efeito do botão chatbox.

Obrigado!
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2184
Pontos Ativos : 2913

http://guiatecnico.ativo-forum.com/
  • 0

Resolvido Re: Como faz este efeito?

Mensagem por Kyo Panda em 12/01/17, 10:45 am

Eu sou meio contra ações em hover, uma porque usuários de tablets não conseguem executá-los e outra porque nem sempre o usuário queria que aquela ação ocorresse (no caso de passar o mouse acidentalmente por cima). MAS:

Código:
/* globals jQuery */
 
(function($) {
  'use strict';
 
  $(function() {
    $('.fa-box-trigger').on('hover', function() {
      $(this)
        .closest('.fa-box')
        .toggleClass('fa-box-open');
    });
  });
}(jQuery));


Bem-vindo ao Fórum dos Fóruns!
Leia as Regras do Fórum dos Fóruns. Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Kyo Panda — Moderadeiro
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3859
Pontos Ativos : 5080

http://ajuda.forumeiros.com

Resolvido Re: Como faz este efeito?

Mensagem por Troubleshoot em 12/01/17, 10:47 am

Muitos THANKS!
Aproposito, eu posso usar o outro código para a versão mobile/tablet Muito feliz

Obrigaaaaado!
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2184
Pontos Ativos : 2913

http://guiatecnico.ativo-forum.com/

Resolvido Re: Como faz este efeito?

Mensagem por Kyo Panda em 12/01/17, 10:54 am

Às ordens. o7

---

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

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


Bem-vindo ao Fórum dos Fóruns!
Leia as Regras do Fórum dos Fóruns. Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Kyo Panda — Moderadeiro
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3859
Pontos Ativos : 5080

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