Mouse Hover Effects with CSS

Hover over the link below! (Example 1)

Add W7R to your favorites!

The link above is a result of the code in the text area below. The text ":hover" is placed behind the id selector, #post, to indicate that all CSS styles in the following brackets should take place when the mouse is hovering over the element with the matching id, "#post".

 Add W7R to your favorites! 

We all have seen hover effects on links, but how about paragraph or divisions <div> like this text here. This phenomenum is made possible by using the ":hover" syntax following the selector we are using which in this case is "hovering". ":hover" is an example of a pseudo-property. Pseudo properties are attached to selectors to indicate that the selector has the block of CSS when that pseudo property applies. Other pseudo properties can be found here!

We all have seen hover effects on links, but how about paragraph or divisions <div> like this text here. This phenomenum is made possible by using the ":hover" syntax following the selector we are using which in this case is "hovering".

All elements of a webpage can be used like the link and paragraph did with the syntax below.

content

For more information please visit CSS :hover Selector