Html Pinit按钮，每个图像具有唯一的URL（包含链接到帖子页面的图像的类别页面）

我试图让用户能够从分类页面中锁定帖子：

功能：将鼠标悬停在帖子图像上，pin按钮显示从帖子中提取的标题的特定帖子URL的pin

他们应该能够锁定的唯一方法是单击按钮，单击图像上的任何位置都会将用户带到post页面本身

我知道我不能有两个HREF属性，但我被卡住了-这段代码完全破坏了图像，并且没有按照指定的方式提取任何数据（描述、帖子url等）

script async defer src=“//assets.pinterest.com/js/pinit.js”>

谢谢大家!

找出解决方案，以防任何人需要：

<div class="entry-image">
        <script async defer src="//assets.pinterest.com/js/pinit.js"></script>
        <?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
        <div class="pinbutton" style="position: absolute; top: 10px; right: 10px; display: none;"><a data-pin-do="buttonPin" data-pin-hover="true" data-pin-media="<?php echo $feat_image; ?>" data-pin-url="<?php the_permalink(); ?>" data-pin-description="<?php the_title(); ?>" href="https://www.pinterest.com/pin/create/button/"></a></div>
        <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__('%s', 'minti'), the_title_attribute('echo=0') ); ?>" rel="bookmark">
            <?php the_post_thumbnail(); ?>
        </a>
    </div>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.entry-image').mouseenter(function() {
            $(this).children('.pinbutton').fadeIn('fast');
        }); 
        $('.entry-image').mouseleave(function() {
            $(this).children('.pinbutton').fadeOut('fast');
        });
    });
    </script>
    <?php } ?>

jQuery（文档）.ready（函数（$）{
$（'.entry image'）.mouseenter（函数（）{
$（this）.children（'.pinbutton'）.fadeIn（'fast'）；
}); 
$（'.entry image'）.mouseleave（函数（）{
$（this）.children（'.pinbutton'）.fadeOut（'fast'）；
});
});

我想答案在这里等着你：

解决方案需要一些js/css和（在本例中）wordpress调用：

<div class="entry-image">
        <script async defer src="//assets.pinterest.com/js/pinit.js"></script>
        <?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
        <div class="pinbutton" style="position: absolute; top: 10px; right: 10px; display: none;"><a data-pin-do="buttonPin" data-pin-hover="true" data-pin-media="<?php echo $feat_image; ?>" data-pin-url="<?php the_permalink(); ?>" data-pin-description="<?php the_title(); ?>" href="https://www.pinterest.com/pin/create/button/"></a></div>
        <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__('%s', 'minti'), the_title_attribute('echo=0') ); ?>" rel="bookmark">
            <?php the_post_thumbnail(); ?>
        </a>
    </div>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.entry-image').mouseenter(function() {
            $(this).children('.pinbutton').fadeIn('fast');
        }); 
        $('.entry-image').mouseleave(function() {
            $(this).children('.pinbutton').fadeOut('fast');
        });
    });
    </script>
    <?php } ?>

jQuery（文档）.ready（函数（$）{
$（'.entry image'）.mouseenter（函数（）{
$（this）.children（'.pinbutton'）.fadeIn（'fast'）；
}); 
$（'.entry image'）.mouseleave（函数（）{
$（this）.children（'.pinbutton'）.fadeOut（'fast'）；
});
});

谢谢，但答案不在这里。当图片需要链接到帖子的URL时，你不能有一个“链接”。你需要HTML、CSS和JS，但我也不知道JS。我建议你试着为每一个“锁定”按钮制作一个，然后在悬停时显示它。好主意！这应该是可能的一点css机动。谢谢！：）

<div class="entry-image">
        <script async defer src="//assets.pinterest.com/js/pinit.js"></script>
        <?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
        <div class="pinbutton" style="position: absolute; top: 10px; right: 10px; display: none;"><a data-pin-do="buttonPin" data-pin-hover="true" data-pin-media="<?php echo $feat_image; ?>" data-pin-url="<?php the_permalink(); ?>" data-pin-description="<?php the_title(); ?>" href="https://www.pinterest.com/pin/create/button/"></a></div>
        <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__('%s', 'minti'), the_title_attribute('echo=0') ); ?>" rel="bookmark">
            <?php the_post_thumbnail(); ?>
        </a>
    </div>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.entry-image').mouseenter(function() {
            $(this).children('.pinbutton').fadeIn('fast');
        }); 
        $('.entry-image').mouseleave(function() {
            $(this).children('.pinbutton').fadeOut('fast');
        });
    });
    </script>
    <?php } ?>