.CSS-hover 的解释
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了.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); }
以上是关于.CSS-hover 的解释的主要内容,如果未能解决你的问题,请参考以下文章