纯CSS如何实现鼠标悬停显示图片效果的实例分享

互联网
夏天，他把手中的魔法棒轻轻一挥，带给咱们一片充满活力的蓝色。你瞧，蓝蓝的天空飘着朵朵白云，远处，蔚蓝的大海在夏风的吹拂下，卷起层层浪花。

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

效果如下图：

html代码

XML/HTML Code复制内容到剪贴板
  1. <tableid="filelist"style="width:100%;">
  2. <tbody>
  3. <tr>
  4. <tdclass="filenameui-draggableui-droppable"width="30%;">
  5. <divclass="name">
  6. <spanclass="fileactions">
  7. <arel="nofollow noopener noreferrer" href="#"class="actionaction-download"data-action="Download"original-title="">
  8. <imgclass="svg"src="svg/download.svg">
  9. <span>下载</span>
  10. </a>
  11. <arel="nofollow noopener noreferrer" href="#"class="actionaction-sharepermanent"data-action="Share"original-title="">
  12. <imgclass="svg"src="svg/public.svg">
  13. <span>已共享</span>
  14. </a>
  15. </span>
  16. </div>
  17. </td>
  18. <tdclass="filesize"style="color:rgb(-4780,-4780,-4780)">70.3MB</td>
  19. <tdclass="date">
  20. <spanclass="modified"title="September29,201414:45"style="color:rgb(0,0,0)">2分钟前</span>
  21. <arel="nofollow noopener noreferrer" href="#"original-title="删除"class="actiondeletedelete-icon"></a>
  22. </td>
  23. </tr>
  25. <tr>
  26. <tdclass="filenameui-draggableui-droppable"width="30%;">
  27. <divclass="name">
  28. <spanclass="fileactions">
  29. <arel="nofollow noopener noreferrer" href="#"class="actionaction-download"data-action="Download">
  30. <imgclass="svg"src="svg/download.svg">
  31. <span>下载</span>
  32. </a>
  33. <arel="nofollow noopener noreferrer" href="#"class="actionaction-share"data-action="Share">
  34. <imgclass="svg"src="svg/share.svg">
  35. <span>分享</span>
  36. </a>
  37. </span>
  38. </div>
  39. </td>
  40. <tdclass="filesize"style="color:rgb(159,159,159)">762kB</td>
  41. <tdclass="date">
  42. <spanclass="modified"style="color:rgb(0,0,0)"original-title="September29,201416:36">2分钟前</span>
  43. <arel="nofollow noopener noreferrer" href="#"original-title="删除"class="actiondeletedelete-icon"></a>
  44. </td>
  45. </tr>
  46. </tbody>
  47. </table>

上面代码我直接从项目中复制，可能有很多多余的css,大家只是看下大致代码！

精华的css

图片中的效果，大致的实现思路是，一开始设置为opacity=0，然后鼠标移上去之后显示。

代码如下：

CSS Code复制内容到剪贴板
  1. #filelista.action{
  2. display:inline;
  3. padding:18px8px;
  4. line-height:50px;
  5. -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  6. filter:alpha(opacity=0);
  7. opacity:0;
  8. display:none;
  9. }
  10. #filelisttr:hovera.action,#filelista.action.permanent{
  11. -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  12. filter:alpha(opacity=50);
  13. opacity:.5;
  14. display:inline;
  15. }
  16. #filelisttr:hovera.action:hover{
  17. -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  18. filter:alpha(opacity=100);
  19. opacity:1;
  20. display:inline;
  21. }

以上是大致的精华代码！

css技巧分析

tr鼠标移上去，下面的a标签显示可以这么选择 #filelist tr:hover a.action 加入tr鼠标移上去hover了，那么tr下面的a标签的鼠标移上去效果同样有用，这么写： #filelist tr:hover a.action:hover

jquery中有attr，活动标签的属性，css也可以和jquery一样的类似选择。

例如下面的这个a标签

XML/HTML Code复制内容到剪贴板
  1. <arel="nofollow noopener noreferrer" href="#"data-action="Rename"class="action"></a>

我们可以这么写样式：

CSS Code复制内容到剪贴板
  1. a.action[data-action="Rename"]{
  2. padding:16px14px17px!important;
  3. position:relative;
  4. top:-21px;
  5. }

看了这篇文章，您有收获吗？不知道通过这篇文章，您对CSS有没有更近一步的了解！

本文纯CSS如何实现鼠标悬停显示图片效果的实例分享到此结束。日子总是像从指尖渡过的细纱，在不经意间悄然滑落。那些往日的忧愁和误用伤，在似水流年的荡涤下随波轻轻地逝去，而留下的欢乐和笑靥就在记忆深处历久弥新。小编再次感谢大家对我们的支持！

您可能有感兴趣的文章
基于CSS 判断鼠标进入的方向
CSS如何实现鼠标移至图片上显示遮罩层效果
html+css+javascript如何实现跟随鼠标移动显示选中效果
如何利用HTML+CSS如何实现跟踪鼠标移动功能
详解CSS如何实现仿Windows10鼠标照亮边框效果