Pinterest懸停按鈕

2

我會把按鈕放在容器div中，並默認隱藏它。然後，當你將鼠標懸停在容器上時，在裏面顯示按鈕。

容器需要有一個相對位置，並且該按鈕需要是絕對的以具有浮動效果。根據你在容器什麼，你可能需要添加的z-index屬性div.button

它會是這樣的（顯然包括jQuery的）：

<html> 
<head> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script> 
$(function() { 
    $('div.container').on({ 
     hover: 
      function() { 
      var buttonDiv = $(this).children('div.button'); 
      buttonDiv.toggle(); 
      } 
    }); 
}); 
</script> 

<style> 
div.container { 
    position: relative; 
    width: 500px; 
    height: 200px; 
    border: 1px solid #000; 
} 
div.button { 
    position: absolute; 
    left: 20px; 
    top: 20px; 
    width: 20px; 
    height: 10px; 
    display: none; 
    border: 1px solid #000; 
} 
</style> 
</head> 

<body> 
<div class="container"> 
    <div class="button">button text</div> 
</div> 
</body> 
</html>

這裏亞去，扔在一個jsfiddle：http://jsfiddle.net/5txv4/1/

來源

2012-06-28 19:15:51 LOLapalooza

+0

我試過這個，但按鈕根本不顯示... – digitale

+0

我猜你沒有包括其餘的HTML和/或不包括jquery。檢查我發佈的jsfiddle鏈接，它的工作原理。 – LOLapalooza

2

編輯：修剪小提琴。看起來更像pinterest。

這裏的馬琴（個補鍋匠實際上） - >http://tinkerbin.com/Tr7ZZTsx

沒有的jQuery JavaScript或任何需要。

小提琴更令人印象深刻，但這裏是所有您需要實現的功能。

HTML：

<div class="box"> 

    <ul class="btn-list"> 
     <li><button>Button 1</button></li> 
     <li><button>Button 2</button></li> 
     <li><button>Button 3</button></li> 
    </ul> 

    ... 

</div>

CSS：

.box { 
    width: 200px; 
    height: 300px; 
} 

.btn-list { 
    display: none; 
} 

.box:hover .btn-list { 
    display: block 
}

來源

2012-06-29 02:00:52 banzomaikaka

3

我相信這正是你在找什麼：當然

http://joshkoberstein.com/blog/2012/09/jquery-pinterest-hover-button

(function($){ 
    $(window).load(function(){ 

     //the URL to be shared 
     $PinItURL = $(location).attr('href'); 

     //for each img tag with 'pinit' class 
     $('.pinit').each(function(){ 

      //the media to be shared - full image url 
      $media = $(this).prop('src'); 
      //the description of media - use the image title 
      $description = $(this).attr("title"); 

      //place 'pin it' button after the image in the DOM 
      $(this).after(getButtonHTML($media, $description)); 

      //define the hover target as the image 
      $target = $(this); 
      //define pinit as the button we just placed after the image 
      $pinit = $(this).next(".pinit-wrapper"); 

      //calculate the left position for the pinit button 
      $targetX = $(this).position().left + parseInt($target.css("padding-left")) + parseInt($target.css("margin-left")); 
      //calculate the top position for the pinit button 
      $targetY = $(this).position().top + parseInt($target.css("padding-top")) + parseInt($target.css("margin-top")); 

      //place the pinit button as an overlay on top of image 
      $pinit.css({"top":$targetY+20,"left":$targetX+20}); 

     }); 

     //loadin the pinterest js to render the actual button iframe 
     $.ajax({ url: 'http://assets.pinterest.com/js/pinit.js', dataType: 'script', cache:true}).done(function(){ 

      //load complete... bind the handlers... 

      //on image mouseenter, show the pinit button 
      $('.pinit').bind('mouseenter', function(){ 
       $(this).next('.pinit-wrapper').stop().fadeTo(200, 1.0, function(){ $(this).show(); }); 
      }); 
      //on image mouseleave, hide the pinit button 
      $('.pinit').bind('mouseleave', function(){ 
       $(this).next('.pinit-wrapper').stop().fadeTo(200, 0.0, function(){ $(this).hide(); }); 
      }); 

      //on pinit button mouseenter, do not fade out 
      $('.pinit-wrapper').bind('mouseenter', function(){ 
       $(this).stop().stop().fadeTo(200, 1.0, function(){ $(this).show(); }); 
      }); 

     }); 

    }); 
})(jQuery); 

//returns pinit link wrapped in a hidden div 
function getButtonHTML($media, $description){ 
    $HTML = '<div class="pinit-wrapper" style="position:absolute;display:none;z-index:9999;cursor:pointer;"><a href="http://pinterest.com/pin/create/button/?url='+$PinItURL+'&media='+$media+'&description='+$description+'" class="pin-it-button" count-layout="none">Pin It</a></div>'; 
    return $HTML; 
}

來源

2012-09-11 05:05:38

Pinterest懸停按鈕

回答

相關問題