Question

如何制作“类似pinterest”的按钮，只显示悬停，但位于图片内？

我当然正在使用jQuery。

Answer 1

我相信这正是您所寻找的：

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;
}

Answer 2

我将按钮放在容器div中，默认隐藏它。然后，当您将鼠标悬停在容器上时，显示内部按钮。

容器需要具有相对位置，并且按钮必须是绝对的以具有浮动效果。根据容器中的内容，您可能需要向div.button

添加z-index属性

它是这样的（显然包括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/

Answer 3

编辑：整理小提琴。看起来更像是彪悍。

这是小提琴（实际上是修补匠） - ＆gt; 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
}

Pinterest悬停按钮

3 个答案: