Advanced Search

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.

Expand | Embed | Plain Text

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.