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


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.