图片链接未显示在另一张图片上

Pictured link not showing up over another picture

本文关键字：一张 链接 显示      更新时间：2023-09-26

我正试图在缩略图幻灯片的主图像上方添加一个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>

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

有什么建议吗？

所以有几点不对劲。第一件事：

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

上面写的是pinItbutton，而不是pinItbutton。此外，你正在用一些CSS为其他图像定位你的pin按钮，这使得它变得巨大而奇怪。

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

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

相关文章：