CSS hover to show button for each list div - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover to Show

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Hover to Show

Description

CSS hover to show button for each list div

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">
.list {<!--from  www .  j a va  2  s  .co  m-->
   height:201px;
   width:301px;
   border:2px solid Chartreuse;
   overflow:auto;
   position:relative;
}

.list div {
   padding:6px 0px 6px 6px;
   border-bottom:2px solid yellow;
}

.list div:hover {
   background:blue;
}

.list div:active {
   background:red;
}

.list button {
   float:right;
   display:none;
}

.list div:hover button {
   display:block;
}
</style> 
 </head> 
 <body> 
  <div id="list1" class="list"> 
   <div>
     Lorem 
    <button>L</button> 
   </div> 
   <div>
     Lorem 
    <button>L</button> 
   </div> 
   <div>
     Lorem 
    <button>L</button> 
   </div> 
   <div>
     Lorem 
    <button>L</button> 
   </div> 
  </div> 
  <br> 
  <br> 
  <div id="list2" class="list"> 
   <div>
     Lorem 
    <button>L</button> 
   </div> 
   <div>
     Lorem 
    <button>L</button> 
   </div> 
   <div>
     Lorem 
    <button>L</button> 
   </div> 
   <div>
     Lorem 
    <button>L</button> 
   </div> 
   <div>
     Lorem 
    <button>L</button> 
   </div> 
   <div>
     Lorem 
    <button>L</button> 
   </div> 
   <div>
     Lorem 
    <button>L</button> 
   </div> 
   <div>
     Lorem 
    <button>L</button> 
   </div> 
   <div>
     Lorem 
    <button>L</button> 
   </div> 
   <div>
     Lorem 
    <button>L</button> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials