1

É possível com CSS fazer o seguinte código

.grupo-input input:hover .grupo-input span{
    margin-top: -30px;
}

Onde no HTML se encontra desta forma:

<label class="grupo-input">
    <span>Nome</span>
    <input type="text" name="filtro_nome">
</label>
4
  • Não.
    – Largato
    7/08/2016 às 21:58
  • O CSS tem seletores de elementos dispostos sequencialmente, mas eles valem sempre para o último, e não afetam o anterior (o input não tem como afetar o que vem antes dele). Seria legal se você expusesse o problema ou efeito final que quer fazer, a melhor solução nem sempre o caminho que você imagina. Você pode editar a pergunta e explicar como é o efeito que quer fazer, e talvez a gente possa pensar numa estrutura melhor para chegar no resultado.
    – Largato
    7/08/2016 às 22:00
  • Nosso amigo respondeu certinho ali no post, era exatamente aquilo. Muito obrigado cara! 7/08/2016 às 22:06
  • 1
    Mesmo assim, é sempre bom a pergunta ficar o mais clara possível, para que ajude outras pessoas com o mesmo problema. Lembrando que quanto mais detalhada a pergunta, mais chance de ter uma variedade de respostas com propostas interessantes (nem sempre se tem a sorte de alguém experiente como o @Sergio postar uma resposta que coincide com o que você precisa). Para as próximas, tem umas dicas legais aqui: Como perguntar. E que bom que essa já deu certo!
    – Largato
    7/08/2016 às 22:07

1 Resposta 1

3

Quase :)

Existe um seletor de CSS para elementos adjacentes, o +, mas ele só funciona para elementos que estão a seguir. E não como no teu caso que está antes.

Nota ainda que o elemento span é um elemento inline por defenição, para o poderes posicionar na vertical precisas de display: block; por exemplo.

Mas se o HTML puder ser trocado de ordem, então já dá:

label {
    display: block;
    padding: 20px;
}

.grupo-input span {
    transition: margin-top .5s;
    margin-top: 0px;
    display: block;
}

.grupo-input input:hover + span {
    margin-top: -40px;
}
<label class="grupo-input">
    <input type="text" name="filtro_nome">
    <span>Nome</span>
</label>

jsFiddle: https://jsfiddle.net/g06s90jk/

Se quiseres podias ter ambos o hover e o focus para não ficar mais calmo: https://jsfiddle.net/g06s90jk/1/

6
  • Caramba cara, perfeito. Vou dar um olhada mais a fundo nesse caso de elementos adjacentes, muito obrigado! 7/08/2016 às 22:06
  • 1
    @PedroSoares se vc mudar para absolute o span com o código do Sergio, vai ficar parecendo um placeholder, e quando puser o mouse em cima ele "sai"
    – Largato
    7/08/2016 às 22:07
  • Antes de me responderem fiz exatamente isso porém usando css com jquery, teria como fazer usando :Focus do CSS? Com certeza teria q ter uma piadinha de jquery para quando o campo não estiver em branco 8/08/2016 às 21:02
  • @PedroSoares com :focus nativo seria assim: jsfiddle.net/g06s90jk/2 é só mudar :hover para :focus
    – Sergio
    8/08/2016 às 21:04
  • Ficou bacana cara. 9/08/2016 às 3:08

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 .