如何在悬停div时修改div的高度并进行转换(没有Javascript的CSS的优先级)

Question

这是代码

HTML

<div id="footmain">
    <div id="col1" class="mark"></div>
    <div id="col2" class="mark"></div>
    <div id="col3" class="mark"></div>
    <div id="col4" class="mark"></div>
</div>

请看我的CSS示例：

http://jsfiddle.net/EtBKx/8/

我需要把它和过渡一起放下，慢慢开始，快速前进，慢慢结束。jQuery是最后一种方法，因为我希望不使用JavaScript，并且支持多种浏览器和CPU速度。

为了与平板电脑和智能手机兼容，最好在每个选项卡的右下角都有一个触发器，同时具有悬停和单击两种功能？，或者<"a">方向<"/a">可以单击一次以放下，再单击一次可转到方向的链接？

Answer 1

我修改了你的小提琴：http://jsfiddle.net/EtBKx/17/

基本上我添加的都是

    *vendorprefix*-transition: height ease 1s;

"轻松"定义了一个开始缓慢、变快和结束缓慢的动画。哦，你有。马克：悬停（有空格），但没用。马克：你想要的是悬停。

有关转换的详细信息：http://www.w3schools.com/css3/css3_transitions.asphttp://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp

Answer 2

jQuery解决方案（它不会减慢应用程序的速度）：

http://jsfiddle.net/EtBKx/16/

我只写了核心语法，现在你可以用.animate替换.css，并添加你需要的所有效果。

---

CSS3解决方案（不兼容所有浏览器）

http://jsfiddle.net/EtBKx/22/

---

编辑：

您可以在这个链接中参考