Hover effect does not work

Navigation
1

I'd like to make a hover effect on my form just like this site:

link

When you hover over a box, I can not do that. 

.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>
    
asked by anonymous 25.05.2015 / 20:43

1 answer

1

The idea is very simple:
Just keep the element hidden until you have the action of :hover and / or :focus in the input. An example: 

.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>
    
25.05.2015 / 21:04
Menu Fixed Scroll Top Bank connection error. Java + Workbench