Question

Which rule will change the text color of p elements with the class "highlight" when hovered over?

A. .highlight hover{
color:green;
}
B. .highlight:hover{
color:green;
}
C. p:hover > highlight{
color:green;
}
D. p:hover > highlight{
color:green;
}

Answer 1

The correct CSS rule to change the text color of paragraphs with the class "highlight" when hovered is option B, which uses the syntax ".highlight:hover{color:green;}".

Step-by-step explanation:

To change the text color of p elements with the class "highlight" when hovered over, you would use the following CSS rule:

B. .highlight:hover{color:green;}

This rule means that when the mouse cursor is over any paragraph (p) with the class "highlight", the text color will change to green. When the hover state is no longer active (e.g., the mouse moves away from the element), the text color will revert to its original state.

The syntax :hover is what specifies the hover state, and the dot before "highlight" indicates that it is a class selector. The combination of these two means that the style change will apply during the hover state of elements with that specific class.