1

Gostaria de fazer um efeito hover no meu formulario igual o desse site:

http://novaerateam.com.br/

Quando passa o mouse em cima aparece uma caixinha do lado não consigo fazer isso

.corpo-1 ul li {
  display: block;
  margin: 10px;
  text-align: center;
}
.corpo-1 ul {
  margin-top: 10%;
}
.contato-barra {
  width: 10%;
  height: 2px;
  background-color: #000;
  border: none;
}
input[type="text"] {
  border: 1px solid #000;
  border-radius: 5px;
  width: 300px;
  height: 25px;
  background-color: transparent;
  font-family: Gabriola;
  font-size: 1.2em;
  outline: none;
}
#form-1:hover {
  display: block;
}
.teste1 {
  margin-left: 65%;
  background-color: aquamarine;
  width: 100px;
  height: 50px;
  color: #000;
  display: none;
}
select {
  border: 1px solid #000;
  border-radius: 5px;
  width: 300px;
  height: 40px;
  background-color: transparent;
  font-family: Gabriola;
  font-size: 1.2em;
  outline: none;
}
textarea {
  border: 1px solid #000;
  border-radius: 5px;
  width: 300px;
  height: 100px;
  background-color: transparent;
  font-family: Gabriola;
  font-size: 1.2em;
  outline: none;
}
#enviar {
  background-color: #000;
  width: 300px;
  height: 50px;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-family: Gabriola;
  font-size: 1.3em;
  text-align: center;
  cursor: pointer;
  outline: none;
}
#enviar:hover {
  background-color: #333;
}
<div id="formulario">
  <form>
    <ul>
      <li>
        <input type="text" placeholder="  Digite seu nome" id="form-1">
        <p class="teste1">testeteste teste</p>
      </li>
      <li>
        <input type="text" placeholder="  Digite seu Email">
      </li>
      <li>
        <input type="text" placeholder="  Digite seu Nickname">
      </li>
      <li>
        <select>
          <option value="the-elder" selected>--- Selecione um jogo ---</option>
          <option value="the-elder">The Elder Scrols Online</option>
          <option value="archage">ArcheAge</option>
          <option value="worlofwarcraft">World of War Craft</option>
          <option value="forsaken">Forsaken World</option>
          <option value="leagueoflegends">League of Legends</option>
          <option value="dota">Dota 2</option>
          <option value="smite">Smite</option>
          <option value="warface">Warface</option>
          <option value="cs">CS-GO</option>
          <option value="bf">Battle Field</option>
          <option value="cod">Call of Dutty</option>
        </select>
      </li>
      <li>
        <textarea placeholder="  Mensagem"></textarea>
      </li>
      <li>
        <button id="enviar">Enviar</button>
      </li>
    </ul>
  </form>
</div>

2
  • 1
    Você já tem algum código feito? Se sim, coloque na pergunta. 25/05/2015 às 18:47
  • @EduardoSilva pronto amigo ta no post mais lembrando que nao faço ideia de como fazer isso criei uma classe teste para fazer um teste se vai mais nao funciona 25/05/2015 às 19:03

1 Resposta 1

1

A ideia é bem simples:
Basta manter o elemento oculto até que haja a ação de :hover e/ou :focus no input. Um exemplo:

.input-group p {
  display:none
}

.input-group input:focus + p,
.input-group input:hover + p {
  display: block
}
<li class='input-group'>
  <input type='text' placeholder='[email protected]' />
  <p>Insira seu email para contato</p>
</li>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .