鼠標懸停：圖片和鏈接上的文字 - 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解決方案

回答

相關問題