在文本概念的圖像。我面對一些錯誤

  I face some problem during implementing image hover text concept . I am a beginner and i dont know much about it to implement . I copied my CSS code to stylesheet.css

的CSS代碼和HTML代碼，我用的是：http://jsfiddle.net/wzjxD/在文本概念的圖像。我面對一些錯誤

這個CSS代碼工作正常，但是當我實現它，它看起來並不好。

我需要實現這個CSS代碼插入到HTML代碼在這裏：http://jsfiddle.net/hWA9h/

我需要實現在該表中的圖像懸停文字效應。請有人幫助我，並給我一個解決的代碼。

在此先感謝。

來源

2013-12-09 user3081582

你的文本在哪裏？ – akash

有關您編寫的代碼問題的問題必須**描述具體問題** - 並且**包含有效代碼**以重現問題本身。請參閱[SSCCE.org]（http://sscce.org/）獲取指導。 –

我想第一個鏈接只是一個例子，第二個鏈接是他/她的HTML標記，需要有CSS和懸停效果。 – iCezz

我想這就是你想要的。每次你將鼠標懸停在圖像鏈接上時，都會顯示文字。您可能需要根據需要調整CSS。
Here是鏈接到您的答案。請檢查一下。
下面是爲那些想在這裏看到的代碼。

爲HTML代碼，您有以下（我將它縮短爲一排的整齊乾淨的答案）：

<center> 
<table id="wrapper" border="2" style="dotted"> 
<tr> 
    <td> 
     <a href="http://couponsoff.in/stores/snapdeal-coupon-codes"><img src="http://www.ohmygod.in/wp-content/uploads/2013/10/snapdeal.jpg" /></a> 
     <p class="text">This is a text</p> 
    </td> 
    <td> 
     <a href="http://couponsoff.in/stores/snapdeal-coupon-codes"><img src="http://www.ohmygod.in/wp-content/uploads/2013/10/snapdeal.jpg" /></a> 
     <p class="text">This is a text</p> 
    </td> 
    <td> 
     <a href="http://couponsoff.in/stores/myntra-coupon-codes/"><img src="http://www.ohmygod.in/wp-content/uploads/2013/10/myntra.jpg"/></a> 
     <p class="text">This is a text</p> 
    </td> 
    <td> 
     <a href="http://couponsoff.in/stores/jabong-coupon-codes"><img src="http://www.ohmygod.in/wp-content/uploads/2013/10/jabong.jpg"/></a> 
     <p class="text">This is a text</p> 
    </td> 
</tr> 
</table> 
</center>

對於你的CSS，你有以下：

#wrapper .text { 
    position: relative; 
    background: rgba(0,0,0,.4); 
    text-align: center; 
    text-height: 0; 
    color: white; 
    font-size: 1em; 
    visibility: hidden; 
} 

#wrapper a:hover + .text { 
    visibility: visible; 
}

編輯：如果你想使用Jquery，然後請看看this

來源

2013-12-09 09:29:52 iCezz

非常感謝很多兄弟。但我的需求並不完全滿意。我需要懸停效果必須出現在圖像上。我需要這個在這個鏈接中出現在最常見的商店選項卡中：http://freecouponson.com/ – user3081582

那是因爲他們正在使用jQuery，但你正試圖使用CSS來實現它。 – iCezz

在鏈接上閱讀我更新的答案以獲得您想要使用jquery的結果 – iCezz

在文本概念的圖像。我面對一些錯誤

回答

相關問題