1
It is possible with CSS to make the following code
.grupo-input input:hover .grupo-input span{
margin-top: -30px;
}
Where in HTML you find yourself this way:
<label class="grupo-input">
<span>Nome</span>
<input type="text" name="filtro_nome">
</label>
3
Almost :)
There is a css selector for adjacent elements, the +, but it only works for elements that are next. And not like your case before.
Further note that the element span is an element inline by definition, so that you can position it vertically display: block; for example.
But if HTML can be changed from order, then:
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/
If you want you could have both hover and the focus not to be calmer: https://jsfiddle.net/g06s90jk/1/
Wow man, perfect. I’ll take a closer look at this case of adjacent elements, thank you very much!
@Pedrosoares if you switch to Absolute the span with Sergio’s code, it will look like a placeholder, and when you put the mouse on top it "comes out"
Before answering me I did exactly this but using css with jquery, would I be able to do using :Focus from CSS? Surely you would have to have a little jquery joke for when the field is not empty
@Pedrosoares with :focus native would look like this: https://jsfiddle.net/g06s90jk/2/ just change :hover for :focus
It turned cool face.
Browser other questions tagged html css animation
You are not signed in. Login or sign up in order to post.
Not.
– Bacco
CSS has element selectors arranged sequentially, but they are always valid for the latter, and do not affect the former (the input cannot affect what comes before it). It would be nice if you exposed the problem or end effect you want to make, the best solution not always the way you imagine. You can [Dit] the question and explain how is the effect you want to do, and maybe we can think of a better structure to get the result.
– Bacco
Our friend answered right there in the post, it was exactly that. Thank you very much man!
– Pedro Soares
Even so, it is always good to get the question as clear as possible, so that it helps other people with the same problem. Remembering that the more detailed the question, the more chance you have of getting a variety of answers with interesting proposals (you’re not always lucky enough for someone as experienced as @Sergio to post an answer that matches what you need). For the next ones, there are some cool tips here: [Ask]. And I’m glad this one worked out already!
– Bacco