Question

我在图片上有一张幻灯片，你可以在这里看到

当您将鼠标悬停在示例图片上时，您会看到一个标题。但是，我如何在其中添加链接？

因此，只有当你悬停并且你看到带有更多信息的灰色部分时，你可以点击图像然后转到例如w3schools的链接。

我的代码在这里

    <div class="image revealUpFull">
        <img src="http://cssdeck.com/uploads/media/items/8/8NNM3Tc.png" width="150px" height="150px" />
        <span class="title">Caption <br / ><br / > with some more info</span>
    </div>
</div>

和CSS

div.container {
    margin: 50px auto;
    width: 675px;
}

div.image {
    position: relative;
    overflow: hidden;
    width: 260px;
    height: 195px;
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 15px;

    box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.3);
}

img {
    position: absolute;
    left: 0;
    top: 0;

    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

span.title {
    width: 260px;
    height: 20px;
    position: absolute;
    background: rgba(30,30,30,0.9);
    text-align: center;
    padding: 5px 0 4px;
    font-size: 14px;
    color: white;
    font-family: "Lucida Sans", "Trebuchet MS", Arial, sans-serif;

    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;

}
div.image.revealUpFull span { 
    height: 195px;
    width: 260px;
    bottom: -150px;
}

div.image.revealUpFull:hover img {
    top: -150px;
}

div.image.revealUpFull:hover span {
    bottom: 0px;
}

Answer 1

如果我能够正确处理您的问题，那么您就可以做到这一点（您希望区域中的整个幻灯片可以点击吗？）。因此，您可以使span和a同时具有该区域的全宽和高度。

DEMO： http://jsfiddle.net/xt94eah2/7/

div.image.revealUpFull span {
    height: 141px;
    width: 150px;
    bottom: -120px;
    display: block;
}
div.image.revealUpFull span a {
    display: block;
    height: 100%;
    width: 100%;
    color: white;
}

标记有一些更正。

上一个</div>不匹配。
内联<img src="" width="150px" height="150px" />错误，width="150" height="150"没有px。

href与图片中的幻灯片

1 个答案: