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
» Banner para o fórum
Hoje à(s) 6:01 por Eduardo Trigo

» Sobre o Nome ''RESPOSTA RÁPIDA''
Hoje à(s) 5:38 por Sr.Oliveira

» Tooltip no nome de usuario
Hoje à(s) 5:19 por ranzatti

» Pedido [FAVICON]
Hoje à(s) 3:44 por Biel_Staff

» Problema com fórum
Hoje à(s) 3:34 por Biel_Staff

» Ícone em CSS
Hoje à(s) 3:28 por iScroll

» Criação de Cartaz
Hoje à(s) 3:15 por Francine_Campos

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

[SRD]JimClark, Eduardo Trigo, Francine_Campos, Gilgamesh, Holkis, ranzatti, SarkZKalie

[ Ver toda a lista ]


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

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 Qua 11 Jan 2017 - 17:22

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 Qui 12 Jan 2017 - 12:50, editado 1 vez(es)
avatar

Troubleshoot
Usuário experiente

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

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

Resolvido Re: Como faz este efeito?

Mensagem por Kyo Panda em Qui 12 Jan 2017 - 12:21

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. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2797
Pontos Ativos : 5918

http://ajuda.forumeiros.com

Resolvido Re: Como faz este efeito?

Mensagem por Troubleshoot em Qui 12 Jan 2017 - 12:34

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

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

Resolvido Re: Como faz este efeito?

Mensagem por Kyo Panda em Qui 12 Jan 2017 - 12:45

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. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2797
Pontos Ativos : 5918

http://ajuda.forumeiros.com

Resolvido Re: Como faz este efeito?

Mensagem por Troubleshoot em Qui 12 Jan 2017 - 12:47

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

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

Resolvido Re: Como faz este efeito?

Mensagem por Kyo Panda em Qui 12 Jan 2017 - 12:54

À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. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2797
Pontos Ativos : 5918

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