Set fill and stroke colors and opacity on SVG paths when hover - HTML CSS SVG

HTML CSS examples for SVG:Path

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

Description

Set fill and stroke colors and opacity on SVG paths when hover

Demo Code

ResultView the demo in separate window 

<!doctype html>
<html xmlns:v xmlns:svg="http://www.w3.org/2000/svg">
 <head> 
  <title>Lightbox Simple</title> 
  <style type="text/css">

.trigger {<!--  w ww . ja va2s.co m-->
   display: inline-block;
}

.dialog,
.film {
   position: absolute;
   left: -7777px;
   z-index: 2;
}

a.trigger:hover .dialog {
   display: block;
   left: 50%;
   top: 50%;
   width: 500px;
   border: 1px solid #fff;
}

a.trigger:hover .film {
   left: -3333px;
   top: -3333px;
   width: 7777px;
   height: 7777px;
   opacity: .7;
   background-color: #000;
   z-index: 3;
}

.visible {
   display: inline-block;
   background-color: #999;
   position: absolute;
   width: 200px;
   z-index: 4;
}

.closer {
   z-index: 4;
   position: absolute;
   top: 0;
   right: 20px;
   display: block;
   background-color: #fff;
   color: #fff;
   width: 0;
}

.placeholder {
   position: absolute;
   top: 0;
   left: 0;
}

@media,
{
   v\:rect,
   v\:fill {
      behavior: url(#default#VML);
   }
   .vml_bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
   }
   a.trigger:hover .film {
      width: 0;
   }
   .vml_wrap {
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      display: inline-block;
   }
   a.trigger:hover {
      visibility: visible;
   }
   a.trigger:hover .vml_wrap {
      width: 7777px;
      height: 7777px;
   }
}

      </style> 
 </head> 
 <body> 
  <p>hey</p> 
  <span class="closer">X</span> 
  <a href="#" class="trigger"> you <span class="vml_wrap"> 
    <v:rect fillcolor="black" class="vml_bg"> 
     <v:fill opacity="0.5" /> 
    </v:rect> </span> <span class="dialog"> <span class="visible">hi</span> <span class="film"> </span> </span> </a>  
 </body>
</html>

Related Tutorials