Advanced Search

JQuery Show image on Mouse Hover

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. JS
  2. ------------------------------------------------------------
  3.  
  4. $(".playbutton").hover(
  5.   function(){   
  6.    $('div.play', this).show();
  7.   },
  8.   function(){
  9.    $('div.play', this).hide();
  10.   }
  11.  );
  12.  
  13. CSS
  14. -----------------------------------------------------------
  15. .play {
  16.     background: url("../images/default/btn-play-big.png") no-repeat scroll center center transparent;
  17.     height: 32px;
  18.     margin: -62px 29px 0 31px;
  19.     opacity: 0.8;
  20.     position: relative;
  21.     width: 32px;
  22.     z-index: 100;
  23.     display:none;
  24. }
  25.  
  26. HTML
  27. -------------------------------------------------
  28. <div class="playbutton">
  29.          <a href="ppvvideo_detail.php?product_id={product_id}&clip_id={more_id}">{photo_path}</a>
  30.           <div class="play"></div>
  31.          </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.