Freelance Web Developer

Say Hi

Feb 17, 2011

Handling onClick event with CSS

Hi friends, After a long time i am back! I would like to thank you for your love, comments and support.
Today i want to show you that how we can Handle the onClick mouse event with pure CSS. And how to create pure Css lightbox and Pure Css text-zoomer.


We are going to use the :target CSS selector to detect the hash(#) from url. And you know we can change the Hash by href="#hash" by onClick.

Code - CSS

#lightbox {

 /* works with IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */

 #lightbox:target {

Code - HTML

<div id="lightbox">
              <a href="#">Hide me</a><br />
              Hi!! <br />

              i am the lighbox

<a href="#lightbox" >Show the lighbox</a>


See here is the working example.


By :