Advanced Search

Clickable list item (or bock or any other element)

/ Published in: jQuery
Save to your folder(s)
Originally from http://www.pseudocoder.com
Make an li (or div or whatever) clickable without having to wrap it in a link-tag.
Like Matt, I like to add a .hover class to it in order to apply hover effects

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. //http://www.pseudocoder.com/archives/clickable-box-with-jquery
  2.  
  3. $(".item-list li").click(function() {
  4.   window.location = $(this).find("a.more").attr("href");
  5. });
  6.  
  7. // add some hover effects
  8. $(".item-list li").hover(
  9.   function() {
  10.     $(this).addClass("hover");
  11.     $(this).append('<div class="learn-more">Learn More</div>');
  12.   },
  13.   function() {
  14.     $(this).removeClass("hover");
  15.     $(".learn-more").remove();
  16.   }
  17. );
  18.  
  19.  
  20. ---
  21.  
  22. .item-list li {
  23.   display: block;
  24. }

URL: http://www.pseudocoder.com/archives/clickable-box-with-jquery

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.