Question

所以我花了最后两个小时撞到墙上，这可能是一个简单的解决方案（？）：

我想在jquery Loopedslider中为每个image / div添加一个使用CSS的超链接按钮。

我以前曾多次使用过loopedslider，但从不需要添加超链接按钮。一个很好的例子是Amazons网上商店主页：http://webstore.amazon.co.uk/按钮位于每个图像的左下角。

这是否可以使用Loopedslider？基督，这甚至有意义吗？： - /

任何帮助都会非常感激！干杯! ： - ）

Answer 1

这样的事情：

.yourDiv:after{
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 10;
    display: block;
    padding: 5px;
    content: "click here!";
    background-color: blue;
    color: #fff;
    font-family: "comic sans", arial, sans-serif;
    font-size: 12px;
}

当然，您需要使用滑块定位滑块中的特定div。 .slider div {}

然后在js中添加点击功能。

更新：似乎jQuery无法将功能放在：after元素之后。所以我的建议是你在jQuery而不是css中添加按钮。

应该这样做！

$("#loopedSlider .slider div").each(function(){
    // of course you'll need to create the class (.myBtnStyling) in your css file...
    var btn = $("<div>")
        .addClass("myBtnStyling")
        .text("Click here!");

    btn.click(function(){
        // click functionality here...
        alert("yay");
    });

    $(this).append(btn);
});

使用CSS将超链接按钮添加到Jquery Loopedslider

1 个答案: