html5中用css制作了一个hover展开列表，但是hover展开后把后面的内容挤走了，怎么让解决？

Posted 2023-04-24

把要展开的元素做成绝对定位的（position:absolute），它就脱离了文档流，不会影响到后面的其他元素。当然，用了绝对定位后，你的代码也要做相应的修改才行，这就你自己去摸索了。 参考技术A 把展开的内容设置定位

.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);
}