鼠标悬停的图像描述,如链接

时间:2015-05-01 10:20:44

标签: javascript jquery html css

我想在图片中添加一些文字悬停在我网站的图片中;当鼠标光标移动到图像上时,显示有关该图像的一些文本。 我想添加一些关于该图像的描述。 但我希望盒子在这个网站上是这样的: http://libeskind.com/work/ 请看链接,并告诉我该怎么办?

我希望它与链接示例一样 谢谢大家

1 个答案:

答案 0 :(得分:0)

这是一个简单的工作,看看我的例子,我只是做了一个简单的例子,我没有添加过渡,因为我认为它会帮助你学习,尝试理解代码它​​真的很容易。



.imgc{width:100px;}
.imgc img{height:200px}
.imgc p {position:absolute;transition:1s all;padding:10px;background:#ddd;width:240px;display:none;margin-top:-20px}
.imgc:hover > p{display:block;}

<div class='imgc'>
    <img src='http://libeskind.com/wp-content/uploads/aerial-view-c-guenter-schneider-555x426.jpg' />
    
    <p>Hello World</p>
    </div>
&#13;
&#13;
&#13;