Ads Top

How to create click events using CSS

An event is something that happens when we do something. In CSS, the most common is the hover selector which helps us to select elements when we mouse over them and then an event is executed automatically. There is one way to avoid this since in modern browsers there is a property called pointer-events which allows us to disable them. For instance, if we have a link and we set the pointer-events property value to none, it would simply not work:
<a href="page-url" style="pointer-events: none;">Click here</a>
Many use :target to make it work, however, this is not always the best choice if we consider its jumping behavior - click on the link below to see what happens:

Link with target
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu cursus dui, ac fermentum eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce elementum sapien et augue fringilla aliquam. Ut a viverra libero, eget commodo nisi. Maecenas ultrices facilisis dignissim.
<style>
#linktarget {display: none;}
#linktarget:target {display: block;}
</style>
<a href="#linktarget">Link with target</a>
<div id="linktarget">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu cursus dui, ac fermentum eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce elementum sapien et augue fringilla aliquam. Ut a viverra libero, eget commodo nisi. Maecenas ultrices facilisis dignissim.
</div>
Another option is to use the :focus selector which will make the hidden content to expand on mouse click.
The advantage of this selector is that the page stays still, however, we have to click anywhere "outside" to close the expanded content and besides this, the hidden content should be immediately after, with no intermediate tags:

Demo with focus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu cursus dui, ac fermentum eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce elementum sapien et augue fringilla aliquam. Ut a viverra libero, eget commodo nisi. Maecenas ultrices facilisis dignissim.
<style>
.focuselector {display: none;}
span:focus ~ .focuselector {display: block;}
</style>
<span tabindex="0">Link with focus</span>
<div class="focuselector">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu cursus dui, ac fermentum eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce elementum sapien et augue fringilla aliquam. Ut a viverra libero, eget commodo nisi. Maecenas ultrices facilisis dignissim.
</div>
The last method is more fancy even though it requires more tags but it works the best since it allows us to create a toggle effect, i.e., expand on click and then collapse when clicking again. In this case, we'll use the :checked selector:


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu cursus dui, ac fermentum eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce elementum sapien et augue fringilla aliquam. Ut a viverra libero, eget commodo nisi. Maecenas ultrices facilisis dignissim.
<style>
.checked-selector {display: none;}
:checked ~ .checked-selector {display: block;}
input.hidden[type=checkbox] {position: absolute;left: -999em;}
</style>

<label for="toggle-hidden">Demo with checked</label>
<input type="checkbox" id="toggle-hidden" class="hidden" />
<div class="checked-selector">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu cursus dui, ac fermentum eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce elementum sapien et augue fringilla aliquam. Ut a viverra libero, eget commodo nisi. Maecenas ultrices facilisis dignissim.
</div>
To apply these effects on the links and content that you want to hide and expand only on mouse click is very easy: when you create a post, paste one of the codes above inside the HTML box and replace the text in blue with the name of your link and add your text instead of the green one.

Categories

adsense adsense optimization adsense tips Animation Announcement Apps Background backlinks Basic blog Blog Design blogger Blogger Design Blogger Hack blogger pages blogger posts Blogger Security Blogger Special Tricks Blogger Templates Blogger Tips Blogger Tips & Tricks Blogger tools blogger tricks Blogger Widgets Blogger Widgets and plugins Blogging Basic Tips Blogging ethics Blogging tips Blogging Tools Blogging Tricks Btemplates 2013 Btemplates 2014 Bugs and Errors click bombing Comments css CSS and HTMLTricks CSS3 Cursors custom domain Design Drop Down Menu Earning Tips Editing emoticons Events Facebook Facebook tricks Featured Content Slider firebug Flash Free Coupons Free Recharge Gadget Generator Google Google AdSense Google Analytics Google Plus Google Plus Tricks Guest Posts Horizontal Menu How To HowTo Tuts HTML Image Image Effects Increase traffic instagram Interesting invalid clicks Java Script javascript jQuery Label labels Link Building Links LOGO Makers Make Money Make Money Online Marketing Menu bar menus Menus for Blogger Multi Tabbed Navigation navigation menu News Numbered Page Optimizing Other Tricks Page Photoshop Pop Out popular posts Post posts presentations Pure CSS Menu recent comments recent posts related posts Responsive Blogger Templates robots Rss Search box SEO SEO Strategy SEO Tips & Tricks sitemap Slide Show slideshows Social Media social media plugins statcounter static pages Style your Blog swf Tab Menu Template Template Designing Template Tricks Templates templates 2016 threaded comments Tips tools Traffic Tips Twitter Unlock modems Vertical bar Video Wallpapers Web Designing web hosting Webmaster Tools Widget Widget Generators Widgets wordpress WordPress Plugins WordPress Themes WordPress Tricks WP Tips
Powered by Blogger.