Weblab Lesson 18

Anchor Tag States

An anchor (<a>) tag has four states:

1. link: when the link has not yet been clicked

2. visited: when the link has been clicked (clicking a link "visits" that linked page, hence the name "visited")

3. hover: when the mouse is hovered over, but not clicked, the link

4. active: the moment the mouse is actively clicking down on the link

We style these states using pseudo-classes. In the example below, we specify the anchor element selector, a colon, and the name of the anchor state:

​

Multiple Choice

An anchor tag has _____ states.

• 10

• 4

• 26

• 12

Multiple Choice

The link state of an anchor tag is when:

• there is no link

• the link has already been clicked

• the link is invisible

• the link has not yet been clicked

Multiple Choice

The visited state of an anchor tag is:

• the link has NOT been clicked

• aliens visited the link

• when the link has been clicked

• the link is invisible

Multiple Choice

The hover state of an anchor tag is:

• when the link is clicked

• when the mouse is hovered over, but not clicked, the link

• when the link is invisible

• when aliens use a hover board

Multiple Choice

The active state of an anchor tag is:

• the moment the mouse is invisible

• the moment the mouse eats the cheese

• the moment the mouse is actively clicking down on the link

• the moment

Section 2:
The CSS rule-set below shows that once the link has been clicked to visit the site:
The link color will turn to purple.
The font-size will change to 30 pixels.
___________________________

a:visited{

color:purple;

font-size: 30px;

}

​

Multiple Choice

Which answer describes what will happen in this CSS rule set?

a:visited{

color:purple;

font-size: 30px;

}

• The link will turn purple and change to a font size of 30 pixels once the link has been clicked.

• The link will remain the same no matter what.

• The link will turn purple, but the font will remain the same.

• The font size will change, but the link color will remain the same.

Multiple Choice

What does the CSS rule set below do?

a:hover{

color: chocolate;

background-color: aquamarine;

font-size: 32px;

• When you hover over a link the color of the text turns chocolate and the background color is aquamarine. The font size will change to 32 pixels.

• When you hover over a link nothing happens.

• When you hover over the link the background color changes to chocolate.

• Aliens invade the earth.

Anchor Pseudo-class Order

It is recommended that if you are going to use all four states for an anchor tag, you create your rule sets in CSS in the following order:

1. link

2. visited

3. hover

4. active

Setting these out of order on your CSS can create unforeseen actions as the cascading style of CSS can have one property overriding another. In short, if there are competing rule sets, styles declared later typically override those declared earlier.

​One way to remember the right order is with the phrase "LOVE, HATE" - LV, HA (Link, Visited, Hover, Active).

Dropdown

​One way to remember the right order is with the phrase "LOVE, HATE" - LV, HA (Link, Visited, Hover, Active).​

Select answer

Multiple Choice

Setting CSS rule sets out of order can have unforeseen effects. This is because:

• if there are competing rule sets, styles declared later typically override those declared earlier.

• if there are competing rule sets, styles declared earlier typically override those declared later.

• Aliens invaded

Dropdown

Does the order of the CSS rules sets matter when you are using the four states of anchor tags ?​

Select answer

Multiple Choice

Which is the correct order to code the CSS rule set for the different states of the anchor tags?

• Active

  Hover

  Link

  Visited

• Visited

  Hover

  Link

  Active

• Link

  Hover

  Active

  Visited

• Link

  Visited

  Hover

  Active