hide and show elements on hover - 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

hide and show elements 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">
.inline-aside {<!-- ww w . j a  v  a2  s. co m-->
   position:relative;
   background:Chartreuse;
   border:0.2em solid yellow;
   opacity:0.6;
   width:301px;
   color:blue;
   text-align:center;
}

#main>article .inline-aside aside {
   display:none;
}

#main>article  .inline-aside:hover aside {
   display:inline;
}
</style> 
 </head> 
 <body> 
  <header>
    Lorem ipsum 
  </header> 
  <div id="main"> 
   <nav> 
    <ul> 
     <li> <a href="#section-general">Lorem i</a> </li> 
     <li> <a href="#section-something">Lorem ips</a> </li> 
     <li> <a href="#section-about">Lorem</a> </li> 
    </ul> 
   </nav> 
   <article id="faq-section-general" class="tab-content"> 
    <h1>Lorem i</h1> 
    <div>
      Lorem ipsum dolor si 
     <span class="inline-aside">Lorem ipsum 
      <aside>
        Lorem ipsum dolor sit a 
      </aside> </span> 
    </div> 
    <p>Lorem ipsum dolor sit a</p> 
   </article> 
   <article id="faq-section-something" class="tab-content" e> 
    <h1>Lorem ips</h1> 
    <p>Lorem ipsum dolor sit amet, cons</p> 
    <p>Lorem ipsum </p> 
   </article> 
   <article id="faq-section-about" class="tab-content"> 
    <h1>Lorem</h1> 
    <p>Lorem </p> 
    <aside>
      Lorem ipsum dolor sit amet 
    </aside> 
    <p>Lorem ipsum dolor sit amet</p> 
   </article> 
  </div> 
  <footer>
    Lorem ip 
  </footer>  
 </body>
</html>

Related Tutorials