您现在的位置是：网站首页> 编程资料编程资料

纯CSS实现鼠标悬停显示图片效果的实例分享CSS中的选择器种类总结及效率比较浅谈css清除浮动(clearfix和clear)的用法彻底掌握CSS中的percentage百分比值使用CSS z-index 层级关系优先级的概念CSS中的line-height行高属性学习教程CSS 高级技巧总结(必看)

2021-09-05 1034人已围观

简介 这里来给大家推荐一个纯CSS实现鼠标悬停显示图片效果的实例分享,以针对鼠标移到tr标签上来添加hover这种最简单的方式来演示,简单明了,需要的朋友可以参考下

最近在做一个网盘的项目，用到了鼠标移上去效果，这个效果可以用js来实现，今天主要分享一下，这个效果如何用纯css实现！

效果如下图：

html代码

XML/HTML Code复制内容到剪贴板
  1. <table id="filelist" style="width:100%;">  
  2.    <tbody>  
  3.         <tr>  
  4.             <td class="filename ui-draggable ui-droppable"  width="30%;">  
  5.                 <div class="name">  
  6.                     <span class="fileactions">  
  7.                         <a href="#" class="action action-download" data-action="Download" original-title="">  
  8.                             <img class="svg" src="svg/download.svg">  
  9.                             <span>下载span>  
  10.                         a>  
  11.                         <a href="#" class="action action-share permanent" data-action="Share" original-title="">  
  12.                             <img class="svg" src="svg/public.svg">  
  13.                             <span>已共享span>  
  14.                         a>  
  15.                     span>  
  16.                 div>  
  17.             td>  
  18.             <td class="filesize" style="color:rgb(-4780,-4780,-4780)">70.3 MBtd>  
  19.             <td class="date">  
  20.                 <span class="modified" title="September 29, 2014 14:45" style="color:rgb(0,0,0)">2 分钟前span>  
  21.                 <a href="#" original-title="删除" class="action delete delete-icon">a>  
  22.             td>  
  23.         tr>  
  24.   
  25.         <tr >  
  26.             <td class="filename ui-draggable ui-droppable"  width="30%;">  
  27.                 <div class="name" >  
  28.                     <span class="fileactions">  
  29.                         <a href="#" class="action action-download" data-action="Download">  
  30.                             <img class="svg" src="svg/download.svg">  
  31.                             <span>下载span>  
  32.                         a>  
  33.                         <a href="#" class="action action-share" data-action="Share">  
  34.                             <img class="svg" src="svg/share.svg">  
  35.                             <span>分享span>  
  36.                         a>  
  37.                     span>  
  38.                 div>  
  39.             td>  
  40.             <td class="filesize" style=提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：浅谈css清除浮动(clearfix和clear)的用法CSS清除浮动方法大全(小结)CSS3 清除浮动的方法示例CSS清除浮动float的三种方法小结清除css浮动的三种方法小结详解css清除浮动float的七种常用方法总结和兼容性处理浅谈css中浮动和清除浮动带来的影响CSS清除浮动方法小结浅谈CSS中的clear清除浮动CSS清除浮动的方法详解CSS清除浮动的常用方法优缺点分析

    下一篇：CSS中的选择器种类总结及效率比较CSS 设置技巧(单位和值与样式设置技巧)CSS3制作精致的照片墙特效CSS3轻松实现清新 Loading 效果的简单实例CSS 高级技巧总结(必看)浅谈CSS样式之背景、文本

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网