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

最新推荐文章于 2025-06-03 16:56:42 发布

原创

最新推荐文章于 2025-06-03 16:56:42 发布 · 1.8w 阅读

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

<!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=50);
            opacity:0.5;
            background:#333;
            border-bottom:2px solid #000;