Change color for hover state icon - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Color

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Color

Description

Change color for hover state icon

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Change color for hover state icon #stackOverflow</title> 
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>

body {<!--from w  w w . ja  va  2  s.  com-->
   background: #ccc;
}
.container {
   text-align: center;
   margin: 40px;
}
ul, li {
   display: inline-block;
   list-style: none;
   border: 0;
   padding: 0;
   margin: 0;
}
.link p {
   font-size: 0.8em;
   margin-top: 20px;
}
.link span {
   font-size: 1.8em;
}
.link {
   display: block;
   width: 80px;
   height: 80px;
   background: #fff;
   text-align: center;
   padding: 5px;
   text-decoration: none;
}
.link:hover {
   cursor: pointer;
   background: blue;
   color: #fff;
   transition: background-color 0.9s ease;
}
.icon-patient {
   margin: 0 auto;
   width: 20px;
   height: 20px;
   display: block;
}
.icon-patient:before {
   font-family: "Font Awesome 5 Free";
   content: "\f007";
}
.link:hover .icon-patient:before {
   color: #fff;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="container"> 
   <ul> 
    <li> <a href="#" class="link"> <span class="icon-patient"></span> <p>this is a test</p> </a> </li> 
   </ul> 
  </div>  
 </body>
</html>

Related Tutorials