If you don't know what you're looking for, the CSS mouseover effect can be difficult to find since it is implemented by the :hover pseudo-class. A pseudo-class is an extender that can be added to any class or element in your CSS, but adds certain conditions to define when or where that style is applied. Specific to this case, styles defined with the :hover pseudo-class are only applied when the mouse is positioned over the class or element that :hover is attached to.
The best way to learn the intricacies of CSS is by example, so let's jump right in with something basic. If you wanted to apply the style of red text to all <p> elements on your web page, you would place the following line in your CSS:
p { color: red; }
If instead you wanted <p> elements to have the red text style whenever a user places their mouse cursor over them, you would simply add the :hover pseudo-class to the above example, which defines that this style is only applied to the <p> elements on mouseover. That would look like this:
p:hover { color: red; }
Pretty simple right? You can do the exact same thing for CSS styles that are applied to a class. The first line below is an example of making all page elements with the "redtext" class have red text, and the second line is the same style but applied only when the user places their mouse over the element:
.redtext { color: red; }
.redtext:hover { color: red; }
