Hover SVG to change color - HTML CSS SVG

HTML CSS examples for SVG:Rectangle

  1. HOME
  2. HTML CSS
  3. SVG
  4. Rectangle

Description

Hover SVG to change color

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>SVG Color Fill</title> 
  <style>

#thumbs-icon {<!--   w w w .jav  a 2s.c  o  m-->
   width: 15%;
   overflow: hidden;
   margin: 0 auto;
   cursor: pointer;
}
#thumbs-icon:hover g rect {
   fill: rgb(255, 51, 153);
}
#thumbs-icon:hover {
   color: rgb(255, 51, 153);
}
#icon-thumb {
   width: 20px;
   height: 15px;
   margin-top: 0.5em;
   opacity: 1;
   float: left;
}
#text-thumb {
   width: 40%;
   float: left;
   font-size: 10px;
   margin-top: 1em;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div id="thumbs-icon"> 
   <svg id="icon-thumb"> 
    <g> 
     <rect class="rect" width="8" height="5" fill="rgb(102,102,102)" x="0" y="0"> 
     </rect> 
     <rect class="rect" width="8" height="5" fill="rgb(102,102,102)" x="10" y="0"></rect> 
     <rect class="rect" width="8" height="5" fill="rgb(102,102,102)" x="0" y="7"></rect> 
     <rect class="rect" width="8" height="5" fill="rgb(102,102,102)" x="10" y="7"></rect> 
    </g> 
   </svg> 
   <section id="text-thumb">
     Thumbs 
   </section> 
  </div>  
 </body>
</html>

Related Tutorials