CSS event in one element to apply in another

Question

CSS event in one element to apply in another

Navigation

#1 by (3 votes)

1

It is possible with CSS to make the following code

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

Where in the HTML it looks like this:

<label class="grupo-input">
    <span>Nome</span>
    <input type="text" name="filtro_nome">
</label>

html css

asked by anonymous 07.08.2016 / 23:50

1 answer

How do I visualize the person in charge with the dependents Login and wrong password with php

score 3 · Accepted Answer

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