Review Lesson 13

What does the :hover selector do in CSS?

• It changes styles when the mouse clicks the element.

• It changes styles when the mouse hovers over the element.

• It changes styles when the element is inactive.

• It changes styles when the user focuses on the element using the keyboard.

Which of the following :hover selector examples is incorrect?

• button:hover { background-color: yellow; }

• img:hover { opacity: 0.5; }

• card:hover { transform: scale(1.1); }

• p hover { text-decoration: underline; }

Why doesn’t the :hover selector work in this code?

<p:hover { color: blue; }

• <p:hover { color: blue; }

• The hover pseudo-class is written incorrectly.

• Inline styles override the hover effect.

• The syntax for the selector is correct, but it depends on the browser.

Identify the mistake in this hover effect!

.nav:hover (

background-color: #333;

color: #222;)

• The pseudo-class :hover is invalid.

• Parentheses () should be replaced with curly braces {}

• The code is correct as written.

• :hover does not work with .nav.

What is the correct syntax to change the background color of a button when hovered over?

• button:hover { background-color: blue; }

• button hover { background-color: blue; }

• :hover button { background-color: blue; }

• button:hover { hover-background: blue; }

What does the top property do in the following code?

div

{position: absolute;

top: 50px;}

• It positions the element 50px below its parent element.

• It moves the element 50px from the top edge of the viewport.

• It positions the element 50px from the top of its containing block.

• None of the above.

Why doesn’t this hover effect apply in the following code?

.container:hover { background-color: green; }

<div class="box">Hover me!</div>

• The hover selector only works on inline elements.

• The class container is missing in the HTML.

• The syntax for the hover effect is incorrect.

• The background-color property doesn’t support hover effects.

Which of the following code examples correctly changes the text color to blue when hovering over a <p> tag?

• p:hover {

  color: blue;}

• :hover p {

  color: blue;}

• p hover {

  text-color: blue;}

• p:hover {

  text-color: blue;}

What is wrong with this code?

a:hover {

color: green;

• The :hover pseudo-class cannot be used with <a> tags.

• The code is missing a closing brace }

• The property color is invalid in hover effects.

• The property color is invalid in hover effects.

Which of the following examples will NOT work for hover effects?

• .li:hover {

  background-color: yellow;

  }

• .button:hover {

  color: red;

  }

• hover:div {

  background-color: pink;

  }

• img:hover {

  opacity: 0.8;

  }