CSS pseudo class :hover

The :hover pseudo-class applies while the user takes mouse on an element. Note that user may not click on it. Using :hover one can change background color or some other style of element.

Some ways hover can be used

  • :hover
  • a:hover
  • .classname:hover
  • div.classname:hover
  • #id:hover
  • div#id:hover

Example – css :hover

<style type="text/css">
a:hover {
  background-color: lightgreen;
div {width: 100px; height: 100px;}
div:hover {
  border: 1px solid lightgreen;
<a href="/">Hover this link</a><br/><br/>
<div>hover this div</div>



Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments