首页 > Web开发 > 详细

.CSS-hover 的解释

时间:2016-02-19 15:50:02      阅读:198      评论:0      收藏:0      [点我收藏+]

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

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 的解释

原文:http://www.cnblogs.com/jin41/p/5190171.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!