Hover to show box shadow for each row - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover to Show

Description

Hover to show box shadow for each row

Demo Code

ResultView the demo in separate window

<html lang="en">
 <head> 
  <style>
.rows {<!--from ww w.  ja va2 s .  co m-->
   position:relative;
}

.row
 {
   position:relative;
   height:21px;
   cursor:pointer;
   background-color:Chartreuse;
}

.row:nth-child(even)
 {
   background-color:yellow;
}

.row:hover
 {
   box-shadow:0px 11px 11px blue;
   z-index:3
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="rows"> 
   <div class="row"></div> 
   <div class="row"></div> 
   <div class="row"></div> 
   <div class="row"></div> 
   <div class="row"></div> 
   <div class="row"></div> 
   <div class="row"></div> 
   <div class="row"></div> 
  </div>  
 </body>
</html>

Related Tutorials