Hover effect does not work

Asked

Viewed 208 times

1

I’d like to make an effect Hover in my form similar to that of this site:

http://novaerateam.com.br/

When you hover the mouse on top a little box appears on the side I can’t do it

.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>

html5 css3
  • 1

    Do you already have any code done? If yes, ask the question.

  • @Eduardosilva ready friend ta in the post more remembering that I have no idea how to do this created a test class to make a test if it will no longer work

1 answer

1


The idea is very simple:
Just keep the element hidden until there is the action of :hover and/or :focus 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>

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.