Hide and Display Contents Using Only Pure CSS

20 Jun , 2012  HTML & CSS 

The simple CSS hide or display contents using hover of the mouse.

Feeling excited to type down the first tutorial for DesignHuntR. CSS is becoming a powerful styling language which has the power to hide and display content without using any scripting. Today, we shall see how to hide and display content using pure CSS alone.

The CSS menu reacts fast on mouse hover.

OBJECTIVE:

  1. Create Tabs/Menus
  2. Display contents on mouse hover only.
  3. Hide the contents on mouse out.

How is it built?

Please check the demo below:

DEMO | DOWNLOAD

The CSS tabs displays the content on mouse hover and the default is to show only the tabs as menus.

EXPLANATION:

We start by creating the playground or area where the complete tabs and contents would appear.

Here is the HTML code:

Now we generate the tabs and contents by using the lists under lists as shown below:

ContentArea is styled with a width of 400px and height of 20px as shown below:

Note: We have set the html{height:100%;}, which is very important for producing dynamic height as and when the width grows.

Here is how the lists/tabs/menus are styled using CSS:

Check out the demo and view the source code by downloading the file below:

DEMO | DOWNLOAD

Please don’t forget to give us your suggestions and spread the tutorial on your favorite social media. Thanks for viewing the tutorial. All feedbacks are welcome. Stay tuned for more such tutorials and design stuffs. Don’t forget to link back to us :))



Comments are closed.