Deactivating hover effect in CSS - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Hover Effect

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Hover Effect

Description

Deactivating hover effect in CSS

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">
div {<!--   w w  w  .ja v a 2s .  c o m-->
   border:2px solid Chartreuse;
}

.grid-container-columns:not(#divColumns):hover .column-container-wrap, .grid-container-columns.active .column-container-wrap {
   height:100px;
   -webkit-transition:height 0s;
   -moz-transition:height 0s;
   -o-transition:height 0s;
   transition:height 0s;
}

.grid-container-columns:not(#divColumns):hover .column-container, .grid-container-columns.active .column-container {
   -webkit-transform:translateY(0);
   -moz-transform:translateY(0);
   -ms-transform:translateY(0);
   -o-transform:translateY(0);
   transform:translateY(0);
}
</style> 
 </head> 
 <body> 
  <div id="divColumns" class="grid-container-columns"> 
   <div class="column-btn"> 
    <span class="fa fa-th-list"></span>Lorem ipsu 
   </div> 
   <div class="column-container-wrap"> 
    <div class="column-container"></div> 
   </div> 
  </div> 
  <div id="xyz" class="grid-container-columns"> 
   <div class="column-btn"> 
    <span class="fa fa-th-list"></span>Lorem ipsu 
   </div> 
   <div class="column-container-wrap"> 
    <div class="column-container"></div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials