Question

我试图在我所拥有的缩略图幻灯片的主图像顶部添加Pin It按钮。我不确定我做错了什么。我希望Pin It按钮位于幻灯片中主图像的右上角。我希望按钮仅在主图像上显示悬停状态。

我创造了一个小提琴... https://jsfiddle.net/0nst2w0g/

我相信以下代码是错误的。幻灯片显示效果很好，我只是想在我之前的所有内容之上添加它。

*-Pin It button---*/
 .pinItButton {
    padding: 15px 15px;
    cursor: pointer;
}
.pinItButton a {
    text-decoration: none;
    outline: none;
}
.pinItButton a:hover {
    -webkit-transition: color 300ms ease-in 200ms;
    /* property duration timing-function delay */
    -moz-transition: color 300ms ease-in 200ms;
    -o-transition: color 300ms ease-in 200ms;
    transition: color 300ms ease-in 200ms;
}
.pinItButton:hover {
    -webkit-transition: background 300ms ease-in 200ms;
    /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 200ms;
    -o-transition: background 300ms ease-in 200ms;
    transition: background 300ms ease-in 200ms;
}
.slideshow .pinItButton {
    display: none;
}
.slideshow:hover .pinItbutton {
    display: block;
    top: 0;
    float: right;
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
}

我试过放......

<div class="pinItButton"><a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" data-pin-height="28"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_28.png" /></a>
            </div>

幻灯片div下的

，在大班div下。没有什么能让它出现在我想要的地方。

有什么建议吗？

Answer 1

所以有一些问题是错的。首先要做的事情是：

$my_post = array(
  'post_title'    => $row['product_name'],
  'post_content'  => $row['description'],
  'post_status'   => 'publish',
  'post_name'      => $row['product_name'],
  'post_author'   => 1,
  'post_type'     => 'product',
  'custom_field_brand'         => $row['brand'], 
  'custom_field_price'         => $row['price']
);

wp_insert_post( $my_post );

那说pinItbutton，而不是pinItButton。此外，您将针对其他图像的一些CSS定位到您的pin按钮，这使得它变得庞大而且很奇怪。

以下是一些修复，但它肯定需要一些工作。 https://jsfiddle.net/0nst2w0g/16/

编辑：这是一个带浮动滑块的工作示例。不确定这是否适合你。 https://jsfiddle.net/0nst2w0g/20/

图片中的链接没有显示在另一张图片上

1 个答案: