How to hover element on input click

HTML-CSS
1

I have an input

<input type="text"><abbr title="this field is required">

When click inside input then how make that display that title from abbr tag like on click and also do hover on abbr tag? Any selector?

Thanks.

2

Hover and click are CSS pseudoclasses and have to be selected individually. Does this article help? https://css-tricks.com/pseudo-class-selectors/

4

@bestdesign, I think I know what you’re asking.
If you have a form any area that you want users to put in text there’s a defacto standard that required fields are marked with an asterisk. If you’ve ever filled out a form on-line you’ve probably noticed this. The keyword required will also be used, like;

<textarea id="comments" rows="8" cols="50" placeholder="Additional comments" required></textarea>

The <abbr> tag is used for something else. For a quick example of how that tag is used go to my codepen Tech Doc page, click on the ‘What is CSS?’ article and look at the second paragraph. The <abbr> tag is used three times to define HTML, SVG and XML when the user hovers. (Sorry but it’s late and I didn’t feel like creating a new pen to show (a smaller version of) something that I’d already done.)

You could probably do something in JavaScript to pop up a modal to show the field is required but I think that would be over kill.

If this doesn’t answer your question, just ignore it.

1 Like
5 
<abbr title="this field is required">
   <input type="text" id="flower" placeholder="this field is required">
</abbr>