onMouseOver: CSS Psuedo Elements for Mouse and Keyboard Styling Effects (Accessible)

CSS Example

Example Start

HTML Source Code


<p class="rollovercss"><a href="#" >Psuedo-image Link</a></p>

CSS Code


#content p.rollovercss {
  margin: 0;
  padding: 0;
  margin-top: 2em;
  margin-bottom: 2em;
  text-align: center;
}

#content p.rollovercss a {
  background-color: green;
  padding: .5em;
  border: double thick white;
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 150%;
}

#content p.rollovercss a:hover,
#content p.rollovercss a:focus,
#content p.rollovercss a:active {
  background-color: blue;
}