Have a placeholder with + label

HTML-CSS
1

https://jsfiddle.net/17ar5mL6/1/

I have this one. Have a placeholder with + label selector contain opacity : 0; My problem with this when hover over that element is show abbr tag title. I know is can solve with visibility: hidden; But that way cant do smooth fadein and fadeout transition. Any idea to solve this?

How I can hide that abbr tag to show title? and also work opacity smooth fadein fadeout :D?



Thanks.

2

Hello , you have to use transition , here is your code with this feature :

input+label {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, 0);
  transition:opacity 1s ease-in-out;
  opacity: 0;
}
3

transition:opacity 1s ease-in-out;

Is totally fine for work but how hide that abbr tag title on hover placeholder and still work with opacity? because if set visibility that cant be good is just show or just not.So with that lost that smooth from transition with opacity what you write. Any idea? Sorry i maybe write bad my question.

4

sorry, I could’t understand what you want to do , do you want to hide place holder on hovering ?
or do you want to hide the title of abbr tag on hovering ?

5

I want to hide abbr title attribute from hover to display that. And also work the smooth opacity fadein and fadeout. If set visibility see blow

https://jsfiddle.net/17ar5mL6/1/

Is no longer smooth like with opacity no fadeout.

Thanks!

6

Why do you need to set the visibility? Anyway if you use transition: all instead it should work.

7

Because this

<abbr title="This will show?">required</abbr>

Will show at placeholder with mouse without visibility: hidden;.

Thanks,

8

Oh, and for the Adjacent sibling combinator you should really use a space between the combinator and the selectors (might work without but that is the proper syntax, (input + label)

9

Yes but you are already hiding/showing it using opacity. Anyway again you can just use all for the transition.

10

All? oh it seems work! But how is that? I set also transition: opacity 1s ease,visibility 1s ease; And not work but with All work why?

Logic?

Thank you!!!

11

Because of the change to the visibility property.

12

But I set above both? Then what know

All

what is pre definied like above not?

13

That should work as well.
https://jsfiddle.net/ya03nLup/

1 Like
14

Oh my goood!!! Thank you so much. Lol I such a lot with it.

15

No problem, happy to help.

16

I tell you what was my bad. I set transition on input both opacity and visibility. But is must be worked on label as i use + selector and there is not have set transition for visiblity! And I always see with is not work smooth! I do too much things with my layout lol.

Thanks!