Changing Span color on mouseover - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover to change Color

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Hover to change Color

Description

Changing Span color on mouseover

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Simple on Hover of Span</title> 
  <style>

.rtsOut{<!-- www .  j a  va2  s  .  co m-->
   background-color: blue;
   display: inline-block;
   width: 300px; 
   float: right;
}
.rtsIn{
   float: right;
}
.rtsLI{
   width: 500px;
   background-color: #ccc;
}
.rtsLI:hover .rtsOut {
   background-color: red;
}
.rtsLI:hover {
   background-color: red;
}


      </style> 
 </head> 
 <body translate="no"> 
  <h3> 
   <ul> 
    <li class="rtsLI"> <a class="rtsLink tbLeft4" id="TbInformation" href=""> 
    <span class="rtsOut"> <span class="rtsIn"> <span class="rtsTxt">Edit Information</span> </span> </span> </a> </li> 
   </ul> </h3>  
 </body>
</html>

Related Tutorials