图片 link 未显示在另一张图片上

Question

我正在尝试在我拥有的缩略图幻灯片的主图像上方添加一个 Pin It 按钮。我不确定我做错了什么。我希望 Pin It 按钮位于幻灯片中主图像的右上角。我希望按钮仅以悬停状态出现在主图像上。

我创建了一个fiddle...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，大class下div。没有什么能让它出现在我想要的地方。

有什么建议吗？

Answer 1

所以有几处错误。要事第一：

.slideshow:hover .pinItbutton {
    display: block;
    top: 0;
    float: right;
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
}

说的是 pinItbutton，而不是 pinItButton。此外，您正在将一些 CSS 用于其他图像，使其变得庞大而怪异。

这里有一些修复，但它确实需要一些工作。 https://jsfiddle.net/0nst2w0g/16/

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

图片 link 未显示在另一张图片上

Pictured link not showing up over another picture

html

javascript

css

position