Almost:)
There is a CSS selector for adjacent elements , +
, but it only works for elements that are next . And not as in your case you are before .
Note that element span
is a inline
element % by definition, for the precise vertical positioning of display: block;
for example.
But if the HTML can be changed in order, then it gives:
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: link
If you want, you could have both hover
and focus
so you do not get calmer: link