Clickable Items


/ Published in: jQuery
Save to your folder(s)

Making a box clickable. It uses the first link from the box as a location for the click event. In this case, it also toggles a hover-class for visual puposes.


Copy this code and paste it in your HTML
  1. HTML:
  2. <div class="clickable">
  3. <h2>Item title</h2>
  4. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lacinia semper molestie...<p>
  5. <a href="#">Read more</a>
  6. </div>
  7.  
  8. JS:
  9. $(".clickable")
  10. .click(function(){
  11. location = $(this).find("a:first").attr("href");
  12. })
  13. .mouseover(function(){
  14. $(this).toggleClass("hover");
  15. })
  16. .mouseout(function(){
  17. $(this).toggleClass("hover");
  18. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.