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

-2

我得到这种情况：当鼠标悬停时，图片变成彩色透明图层，并加上一些文字信息。现在，我希望这是可点击的，即将其链接到某个网址。我怎么能做到这一点，只需在其中添加一些简单而简单的HTML代码？鼠标悬停：图片和链接上的文字 - 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无亲eius adipiscing MEA NE，MEA dicant elaboraret EA，梅MEIS在Lorem存有soleat斯普兰迪德EA二人拉丁联盟NUM华富嘉洛。

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

来源

2014-09-20 LPR

我看到这是一个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>

希望这会帮助你。

来源

2014-09-20 21:39:30

不错，哈桑！完成一半的工作。 :)但事情是......现在我只是把TEXT作为一个链接。我想要的是所有的元素，我的意思是文字和广场区域 - 实际上是照片上的透明层。如何将该方块（也）变成可链接的元素？... – LPR 2014-09-21 15:29:18

您只需要处理css的不透明度和z-index属性 – 2014-09-21 16:35:50

tryed add/change opacity and z-index。不工作。有没有办法给整个事情（方形区域和文本）提供href属性？ – LPR 2014-09-22 16:52:56

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

回答

相关问题