Which CSS rule will turn the h1 tag blue as the mouse hovers over it?

Which CSS rule will turn the h1 tag blue as the mouse hovers over it?

• A. h1:hover { color: green; }
• B. h1 { color: blue; }
• C. h1:hover { color: blue; }
• D. h1:active { color: blue; }

Answer: (C)

The rule that successfully changes the color of the h1 tag to blue when the mouse hovers over it is the one where you use `h1:hover { color: blue; }`. In CSS, the `:hover` pseudo-class is specifically designed to apply styles to an element when a user places their mouse pointer over that element. When this rule is applied, it alters the color of the text within the h1 tag to blue only during the hover state, providing a visual effect that enhances user interactivity on a webpage. Hence, when the user hovers over any h1 element, they will see the text change to blue, creating a dynamic experience for users. The other options do not achieve the intended result: one style specifies a different color for hover, while another sets a static color for the h1 element regardless of whether it's being hovered over, and the final choice is related to the active state, which occurs only when the element is being clicked on, not hovered.

The rule that successfully changes the color of the h1 tag to blue when the mouse hovers over it is the one where you use h1:hover { color: blue; }. In CSS, the :hover pseudo-class is specifically designed to apply styles to an element when a user places their mouse pointer over that element.

When this rule is applied, it alters the color of the text within the h1 tag to blue only during the hover state, providing a visual effect that enhances user interactivity on a webpage. Hence, when the user hovers over any h1 element, they will see the text change to blue, creating a dynamic experience for users.

The other options do not achieve the intended result: one style specifies a different color for hover, while another sets a static color for the h1 element regardless of whether it's being hovered over, and the final choice is related to the active state, which occurs only when the element is being clicked on, not hovered.