hover property in css code example

Example 1: css hover

.a:hover{background-color: black;}

Example 2: on hover css

/* Changes an element's color on hover */

.selector {
	background-color: black;
}

.selector:hover {
	background-color: blue;
}

Example 3: hover style html

/* css file */
.callitwhatever:hover
{
    background: none;
}

/* HTMl File */
<li><a href="#" class="callitwhatever"> Logo</a></li>

Example 4: hover css

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <title>CSS :hover property</title>

      <style>
         a {
            background-color: powderblue;
            transition: background-color 0.5s;
         }

         a:hover {
            background-color: gold;
         }
      </style>
   </head>
   <body>

	<a href="#">Try hovering over this link.</a>

	<!-- The :hover CSS pseudo-class matches when the user interacts
	with an element with a pointing device, but does not necessarily activate
	it. It is generally triggered when the user hovers over an element with
	the cursor (mouse pointer). -->

   </body>
</html>

Example 5: css transition on hover

/* Simple CSS color transition effect on selector */

div {
	color: white;
  	background-color: black; 
}

div:hover {
	background-color: red;
}


/* Additional transition effects on selector */

div {
	background-color: black;
  	color: white;
  	height: 100px;
  	transition: width 1.5s, height 3s;
  	width: 100px;
  	
}

div:hover {
	background-color: red;
  	height: 300px;	
  	width: 150px;
}

Example 6: css hover animation

a:hover {
  color: #252525;
}

Tags:

Css Example

Recent Posts