Disable first cell of first row in table on hover - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Cell

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table Cell

Description

Disable first cell of first row in table on hover

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
table:hover tr:first-of-type td:first-of-type input {
   display:none;
}

table:hover tr:first-of-type td:first-of-type:after {
   content:"";<!-- ww  w.java  2  s  .co m-->
   display:inline-block;
   width:151px;
   height:2em;
   padding:3px;
   background:white;
   border:2px solid Chartreuse;
   cursor:not-allowed;
   vertical-align:top;
   opacity:0.6;
}
</style> 
 </head> 
 <body>
   Lorem ipsum dolor sit amet, consectetur adip 
  <table> 
   <tbody> 
    <tr> 
     <td> <input> </td> 
     <td> <input> </td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials