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

时间:2021-05-08

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

效果如下图:

html代码

XML/HTML Code复制内容到剪贴板
  • <tableid="filelist"style="width:100%;">
  • <tbody>
  • <tr>
  • <tdclass="filenameui-draggableui-droppable"width="30%;">
  • <divclass="name">
  • <spanclass="fileactions">
  • <ahref="#"class="actionaction-download"data-action="Download"original-title="">
  • <imgclass="svg"src="svg/download.svg">
  • <span>下载</span>
  • </a>
  • <ahref="#"class="actionaction-sharepermanent"data-action="Share"original-title="">
  • <imgclass="svg"src="svg/public.svg">
  • <span>已共享</span>
  • </a>
  • </span>
  • </div>
  • </td>
  • <tdclass="filesize"style="color:rgb(-4780,-4780,-4780)">70.3MB</td>
  • <tdclass="date">
  • <spanclass="modified"title="September29,201414:45"style="color:rgb(0,0,0)">2分钟前</span>
  • <ahref="#"original-title="删除"class="actiondeletedelete-icon"></a>
  • </td>
  • </tr>
  • <tr>
  • <tdclass="filenameui-draggableui-droppable"width="30%;">
  • <divclass="name">
  • <spanclass="fileactions">
  • <ahref="#"class="actionaction-download"data-action="Download">
  • <imgclass="svg"src="svg/download.svg">
  • <span>下载</span>
  • </a>
  • <ahref="#"class="actionaction-share"data-action="Share">
  • <imgclass="svg"src="svg/share.svg">
  • <span>分享</span>
  • </a>
  • </span>
  • </div>
  • </td>
  • <tdclass="filesize"style="color:rgb(159,159,159)">762kB</td>
  • <tdclass="date">
  • <spanclass="modified"style="color:rgb(0,0,0)"original-title="September29,201416:36">2分钟前</span>
  • <ahref="#"original-title="删除"class="actiondeletedelete-icon"></a>
  • </td>
  • </tr>
  • </tbody>
  • </table>
  • 上面代码我直接从项目中复制,可能有很多多余的css,大家只是看下大致代码!

    精华的css

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

    代码如下:

    CSS Code复制内容到剪贴板
  • #filelista.action{
  • display:inline;
  • padding:18px8px;
  • line-height:50px;
  • -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  • filter:alpha(opacity=0);
  • opacity:0;
  • display:none;
  • }
  • #filelisttr:hovera.action,#filelista.action.permanent{
  • -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  • filter:alpha(opacity=50);
  • opacity:.5;
  • display:inline;
  • }
  • #filelisttr:hovera.action:hover{
  • -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  • filter:alpha(opacity=100);
  • opacity:1;
  • display:inline;
  • }
  • 以上是大致的精华代码!

    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复制内容到剪贴板
  • <ahref="#"data-action="Rename"class="action"></a>
  • 我们可以这么写样式:

    CSS Code复制内容到剪贴板
  • a.action[data-action="Rename"]{
  • padding:16px14px17px!important;
  • position:relative;
  • top:-21px;
  • }
  • 看了这篇文章,您有收获吗?不知道通过这篇文章,您对CSS有没有更近一步的了解!

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章