当前位置: 首页 > news >正文

.CSS-hover 的解释

需要做一个图片悬停的效果,从网上找了一个很好的例子

http://www.tystudio.net/2013/08/28/image-caption-hover-effects/

博主不仅提供了源码,还简单讲解了一下原理。

但是真的开始用的时候发现有一个CSS3效果

.no-touch .cs-style-1 figure:hover figcaption,
.cs-style-1 figure.cs-hover figcaption {
    opacity: 1;
    -webkit-transform: translate(15px, 15px);
    -moz-transform: translate(15px, 15px);
    -ms-transform: translate(15px, 15px);
    transform: translate(15px, 15px);
}

figure.cs-hover是什么?

查了半天才知道,这个例子引用了 toucheffects.js 这个js库是作用于支持移动设备:

// for touch devices: add class cs-hover to the figures when touching the items

  如果不需要支持移动设备,可以精简为

.cs-style-1 figure:hover figcaption {
    opacity: 1;
    -webkit-transform: translate(15px, 15px);
    -moz-transform: translate(15px, 15px);
    -ms-transform: translate(15px, 15px);
    transform: translate(15px, 15px);
}

 

转载于:https://www.cnblogs.com/jin41/p/5190171.html

相关文章:

  • erlang调优方法
  • Internet Explorer 无法打开搜索页完美解决办法
  • 关于游戏设计方面的一些想法(1)
  • 2.求一个整数有几位(简单字符串操作)
  • 游戏中换装,换发型等的实现
  • SQL中的循环、for循环、游标
  • 微软面试100题系列:一道合并链表问题的解答[第42题]
  • 机器学习 —— 概率图模型(推理:MAP)
  • DCM4CHEE概述
  • 解决长文本撑破页面的css
  • jQuery学习(三)
  • WordPress 优化方法大全
  • C#中的IntPtr类型
  • 在XCode中使用XCTest
  • wordpress在IIS下无rewrite利用cos-html-cache实现静态页面
  • __proto__ 和 prototype的关系
  • “寒冬”下的金三银四跳槽季来了,帮你客观分析一下局面
  • 2017年终总结、随想
  • Angular 响应式表单 基础例子
  • github指令
  • HashMap剖析之内部结构
  • Hibernate【inverse和cascade属性】知识要点
  • HTML-表单
  • Javascripit类型转换比较那点事儿,双等号(==)
  • leetcode-27. Remove Element
  • miniui datagrid 的客户端分页解决方案 - CS结合
  • React中的“虫洞”——Context
  • RedisSerializer之JdkSerializationRedisSerializer分析
  • Spring核心 Bean的高级装配
  • tweak 支持第三方库
  • 第十八天-企业应用架构模式-基本模式
  • 容器化应用: 在阿里云搭建多节点 Openshift 集群
  • 软件开发学习的5大技巧,你知道吗?
  • 我看到的前端
  • 栈实现走出迷宫(C++)
  • #if和#ifdef区别
  • (10)Linux冯诺依曼结构操作系统的再次理解
  • (c语言版)滑动窗口 给定一个字符串,只包含字母和数字,按要求找出字符串中的最长(连续)子串的长度
  • (delphi11最新学习资料) Object Pascal 学习笔记---第7章第3节(封装和窗体)
  • (第61天)多租户架构(CDB/PDB)
  • (附源码)spring boot建达集团公司平台 毕业设计 141538
  • (力扣记录)235. 二叉搜索树的最近公共祖先
  • (原创)Stanford Machine Learning (by Andrew NG) --- (week 9) Anomaly DetectionRecommender Systems...
  • (转)ObjectiveC 深浅拷贝学习
  • (转载)Linux网络编程入门
  • (转载)OpenStack Hacker养成指南
  • *上位机的定义
  • .equal()和==的区别 怎样判断字符串为空问题: Illegal invoke-super to void nio.file.AccessDeniedException
  • .htaccess配置常用技巧
  • .Net Core webapi RestFul 统一接口数据返回格式
  • .net 调用php,php 调用.net com组件 --
  • .NET/C# 使用 ConditionalWeakTable 附加字段(CLR 版本的附加属性,也可用用来当作弱引用字典 WeakDictionary)
  • .NET/C# 项目如何优雅地设置条件编译符号?
  • /bin、/sbin、/usr/bin、/usr/sbin
  • @Import注解详解