鼠标经过渐变显示文字，隐藏图片

最新推荐文章于 2023-01-03 23:37:56 发布

piperzero

最新推荐文章于 2023-01-03 23:37:56 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：网站建设

本文链接：https://blog.youkuaiyun.com/freejs/article/details/17553445

网站建设专栏收录该内容

740 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的鼠标悬停渐变效果，当鼠标移到图片上时，图片下方会逐渐显示文字描述。通过简单的代码示例展示了如何结合图片和文字，并在鼠标操作时动态变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标经过渐变显示文字，隐藏图片

演示

  XML/HTML Code
 

  <div class="item">  
    <a href="#"><img src="1.gif" alt="Cycliner" title="" width="125" height="125"/></a>  
    <div class="caption">  
        <a href="">Cycliner</a>  
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  
    </div>  
</div>  
  
<div class="item">  
    <a href="#"><img src="2.gif" alt="Banana Moon" title="" width="125" height="125"/></a>  
    <div class="caption">  
        <a href="">Banana Moon</a>  
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>    </div>  
</div>  
  
<div class="item">  
    <a href="#"><img src="3.gif" alt="BlueBuck" title="" width="125" height="125"/></a>  
    <div class="caption">  
        <a href="">BlueBuck</a>  
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  
    </div>  
</div>  
 

 