如何实现鼠标放在图片上出现文字说明效果？

最新推荐文章于 2022-06-15 17:39:09 发布

AlloyTeam-Zy

最新推荐文章于 2022-06-15 17:39:09 发布

阅读量1.8w

点赞数 8

分类专栏：我写的一些web前端小特效

本文链接：https://blog.csdn.net/ZYGG5521/article/details/47394679

版权

最近在浏览网页时，看到一些图片，鼠标一放上去呢，就会有说明文字“浮”上来，移开又“沉”下去，感觉好炫！自己就在网上找实现代码啊，看看事件是怎么实现的！然后就找到了如下的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset=" utf-8">
    <meta name="author" content="http://www.softwhy.com/" />
    <title>蚂蚁部落</title>
    <style type="text/css">
        .main{
            width:738px;
            height:280px;
            margin:0px auto;
            border:5px solid #696;
            position:relative;
        }
        a{text-decoration:none}
        .main .cite{
            width:738px;
            position:absolute;
            bottom:0px;
            left:0px;
            text-align:center;
            -moz-opacity:0.5;
            filter:alpha(opacity&