Hover over input label not working

Question

http://jsfiddle.net/leongaban/6vwLetd6/13/

I have a custom sign up form with styles from a Codrops demo page .

Basically on hover I want to animate the label text (have it fade in and out) but for now just trying to get the text to change color to red:

 .input__label-content--jiro:hover { color: red !important; } 

 <span id="full_name_label" class="input input_jiro"> <input class="input__field input__field--jiro" type="text" id="input-1" /> <label class="input__label input__label--jiro" for="input-1"> <span class="input__label-content input__label-content--jiro"> Full Name </span> </label> </span> 

However when you hover over "Full Name" the color doesn't change. Can you see what is blocking the hover effect?

Answer 1

I've removed pointer-events: none declaration and it works.

Take a look at JSFiddle .

So I think You only need to overwrite this one according to auto value => Docs

Is this what You want??