Question

我遇到这种情况：当鼠标悬停时，图片变成彩色透明层加上一些文字信息。现在，我希望它是可点击的，即将其链接到某个网址。我怎么能这样做，只需添加一些简单的HTML代码即可？

以下是代码：

<style type="text/css">
.pic2 {
    width:220px;
    height:220px;
    background:url(http://www.delish.com/cm/delish/images/Fh/chianti-tuscany-vineyard-lg.jpg) no-repeat;
}
.text {
    width:170px;
    height:170px;
    background:#803244;
    opacity:0;
    line-height: 1.7;
    text-transform: uppercase
}
.pic2:hover .text {
    opacity:0.8;
    text-align:left;
    color:#ffffff;
    font-size:14px;
    font-weight:100;
    font-family:"Arial", Sans serif;
    padding: 25px;
}

Tincidunt reprimique no pro eius adipiscing mea ne，mea dicant elaboraret ea，mei meis soleat splendide ea duo latine num quam at lorem ipsum。

http://jsfiddle.net/luizpaulorocha/5xk2wa4h/

Answer 1

我看到它是div，它最初是隐藏的，并且会在悬停时显示。

您可以做的最简单的事情是添加anchor并提供href。

像这样：

<div class="pic2">
    <div class="text">
        <a href="#">Tincidunt reprimique no pro eius adipiscing mea ne, mea dicant elaboraret ea, mei meis soleat splendide ea duo latine num quam at lorem ipsum.</a>
    </div>
</div>

希望这会对你有所帮助。

鼠标悬停：图像和链接上的文字 - HTML解决方案

1 个答案: