Scribd
Upload
7 views2 pages

CSS Handling of onClick Events

This document discusses how to handle onClick events with pure CSS. It explains that the :target CSS selector can be used to detect the hash from the URL, and that clicking can change the hash via href="#hash". It provides an example of CSS code that sets a lightbox div to display:none initially, but sets it to display:block when it is targeted by the URL hash. Accompanying HTML code includes a link with href="#lightbox" that when clicked will show the lightbox div by changing the URL hash.

Uploaded by

Aji Thesniper
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views2 pages

CSS Handling of onClick Events

This document discusses how to handle onClick events with pure CSS. It explains that the :target CSS selector can be used to detect the hash from the URL, and that clicking can change the hash via href="#hash". It provides an example of CSS code that sets a lightbox div to display:none initially, but sets it to display:block when it is targeted by the URL hash. Accompanying HTML code includes a link with href="#lightbox" that when clicked will show the lightbox div by changing the URL hash.

Uploaded by

Aji Thesniper
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Handling onClick event with CSS

Feb 17, 2011


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.

Idea
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 {
display:none;
}

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

#lightbox:target {
display:block;
}

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

i am the lighbox
</div>
</div>

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

You might also like