Question

          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代码工作正常但是当我实现它时看起来不太好。

我需要在此处的HTML代码中实现此CSS代码：http://jsfiddle.net/hWA9h/

我需要在此表中实现该图像悬停文本效果。请有人帮帮我，给我一个解决的代码。

提前致谢。

Answer 1

我想这就是你想要的。每次将鼠标悬停在图像链接上时，都会显示一个文本。您可能需要根据需要调整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

在文本概念的图象。我面临一些错误

1 个答案: