CHAPTER 11. HOVER AND PSEUDO CLASSES 120
Required Answer::hover
The following css will cause a red outline to appear around any paragraph
as you pass your mouse over it.
p:hover { outline: red 2px dotted; }
:hover- change the style of an element while the mouse rolls across it.
Data entry happens in input fields which we will discuss in a future chapter.
We may want to help the user keep track of where their keystrokes will be
recorded as they tab from field to field. The :focus pseudo-class lets us do
that.
Exam Question 213(p.348): What pseudo-class targets the input field
where typed text would be entered?
Required Answer::focus
The following css will cause a red outline to appear around each input field
as you tab to it.
:focus { outline: red 2px dotted; }
:focus- change the style of the element that would receive any characters
that are typed.
11.5 Transitions and Animations
As you hover or do other things that cause changes on your webpage, the
changes normally take effect immediately.
It can be fun and helpful to have a delayed reaction. For example, when you
use title= the title appears after a brief delay. We do not want to interrupt
the user as they mouse around. We only want to do it when we think they
are interested.
Transitions give us a way to delay the start of an action, and also to let the
action progress slowly and smoothly.
Exam Question 214(p.349):What attribute lets you make styling changes
smoothly instead of instantly?
Required Answer:transition: