Ir para conteúdo
Daniel Francisco

Exibe uma caixa de msg ao passa mouse

Recommended Posts

Olá boa noite...

queria muito pode adicionar no meu site uma função que exibe uma img 

e quando e passado o mouse em cima exibe uma caixa de diálogo como exemplo.. 

 

https://prnt.sc/j2bb6x

 

queria por uma imagem e quando eu colocasse o mouse por cima, exibisse uma caixa dessas aí..

 

desde já obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Esse efeito é conhecido como tooltip ou dica de contexto.
A técnica para criar o efeito é explicada neste tutorial
Ver o tooltip em ação em https://jsfiddle.net/maujor/9v6rfmbg/1/

Veja a seguir os códigos que criei para a demonstração no JsFiddle com tooltip em imagem:

<div class="container">
  <img src="http://via.placeholder.com/400x300/000000/ffffff">
  <div class="conteudo">
    <p>Este é o conteúdo que aparece sobre a imagem e bla bla 
       bla bla bla bla bla bla bla bla bla bla.</p>
  </div>
</div>
/* adapte os valores CSS às suas necessidades */
.container {
  display: inline-block;
  position: relative;
  cursor: help;
}
.conteudo {
  width: 400px; 
  position: absolute;
  top: 0;
  left: 0;
}
.conteudo > p {
  font: 20px sans-serif;
  color: green;
  padding: 20px;
  }
.container p { display: none;}  
.container:hover p  { display: block;}

 

  • Gostei 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Artes Ussler
      Bom dia
       
      Alguns navegadores sublinham ou trocam a cor dos números de telefones que estão no site.
       
      Como faço para remover isso?
       
      Se alguém puder ajudar, eu fico grato.
    • Por freitaz
      Bom eu criei um sistema de cadastro, estava tudo ok, no localhost, mas quando subi para o servidor, teve paginas que não carregou o html, 
      e ficou dessa forma

       
      Gostaria de ajuda, e desde já agradeço! 
    • Por David Cesar
      Não gosto dessa opacidade que meu menu ficou. Tentei isso: 

      Gostaria que a moderação excluísse o tópico, parece que era por causa da propriedade "z-index".

       
      header .head { background: #000000; height:95px; position:fixed; left:15px; width:100%; opacity:1; }  
    • Por LuizH.M
      Então gente eu to com um menu mas não consigo deixar ele responsivo, eu sei q existe varios outros menus responsivo na internet mas meu site ja ta pronto so falta a parte do menu conto com a ajuda de vcs
       
      HTML
      <!-- Barra de Menu -->
      <div class="container">
          <nav class="menu">
              <ul>
                  <li><a href="index.php">Home</a></li>
                  <li><a href="agenda.php">Agenda</a></li>
                  <li><a href="departamento.php">Departamento</a></li>
                  <li><a href="https://www.flickr.com/photos/142117425@N02/" target="blanck">Fotos</a></li>
                  <li><a href="#localizacao">Localização</a></li>
                  <li><a href="https://www.facebook.com/deives.duarte.9"  target="blanck" class="fa fa-facebook"></a></li>
                  <li><a href="#" target="blanck" class="fa fa-twitter"></a>
                  <li><a href="#" class="fa fa-youtube"></a>
              </ul>
          </nav>
      </div>
       
      CSS
      .container {
        position: absolute;
        margin: 20px;
        width: auto;
      }

      .menu{
      width:100%;
      height:54px;
      background-color: #333;
      font-family:'Arial';
      }
      .menu ul{
      list-style:none;
      position:relative;
      background-color: #333;
       /*css custom*/
        display: flex;
        flex-wrap: wrap;
        padding-left: 0px;
      }
      .menu ul li{
      width:50px auto;
      float:left;
      }
      .menu a{
      padding:15px;
      display:block;
      text-decoration:none;
      text-align:center;
      color:#fff;
      }
      .menu ul ul{
      position:absolute;
      visibility:hidden;
      }
      .menu ul li:hover ul{
      visibility:visible;
      }
      .menu a:hover{
      background-color:#f4f4f4;
      color:#555;
      }
      .menu ul ul li{
      float:none;
      border-bottom:1px solid #ccc;
      }
      .menu ul ul li a{
      background-color:#069;
      }
      @media screen and (max-width: 640px){
      .menu ul li{
              width: 100%;
              text-align:center;
          }
          .menu a{
              text-align:center;
          } 
      }
    • Por vcapelli
      Eu tenho um blog no blogger e eu queria adicionar um menu que ao abrisse a página ele ficasse naquela posição e ao descer a página para baixo o menu subisse e ficasse fixo no topo.
       
      Código do menu que tem no template:
      /* Menu */ nav { width:100%; height:59px; background-image: linear-gradient(to bottom, #2c2c2c, #181818); /* box-shadow: inset 0px 3px rgba(255,255,255,0.03), inset 0px -4px rgba(0,0,0,0.2), 0px 4px rgba(0,0,0,0.05); */ list-style:none; } nav li { line-height: 59px; width: 100px; height: 59px; color: #fff; text-shadow: 0px 2px rgb(0, 0, 0); font-size: 16px; float: left; text-align: center; transition: all 0.5s; list-style: none; } nav li:hover { background-image: linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.1)); box-shadow: inset 0px -59px rgba(0,0,0,0.1), inset 0px -3px #337ECA; transition: all 0.5s linear; }  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.