как изменить высоту DIV при наведении его и с переходом (приоритет CSS без Javascript)

Это кодкак изменить высоту DIV при наведении его и с переходом (приоритет CSS без Javascript)

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 и для нескольких браузеров и скорости процессора.

Для совместимости с планшетами и смартфонами лучше иметь триггер в правом нижнем углу каждой вкладки с обеими функциями наведения и щелчка? Или < «a»> Направление < «/ a»> ссылку, которую можно щелкнуть один раз, чтобы упасть, и еще один, чтобы перейти в сторону?

источник

2012-03-02 Ignacio Bustos

Я изменил свой fidd ле немного: http://jsfiddle.net/EtBKx/17/

в основном все, что я добавил был

*vendorprefix*-transition: height ease 1s;

«легкость» определяет анимацию, которая начинается медленно, становится быстрым и заканчивается медленным. О, и у вас был .mark: hover (с пробелом), который не работал, .mark: зависание - это то, что вы хотите.

Подробнее о переходах: http://www.w3schools.com/css3/css3_transitions.asp http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp

источник

2012-03-02 17:44:54 Kisaro

с кодом, это очень хорошо, у меня есть эта проблема (возможно, из-за относительного положения «col4» http://jsfiddle.net/EtBKx/26/ Я хочу, чтобы все было плавающим на следующем контенте –

Вы хотите col4, чтобы также покрыть контент ниже? Тогда да, изменив его на позицию: абсолютный будет делать трюк, однако, поскольку это также удаляет его из потока документов, вы необходимо будет определить содержащий элемент с фиксированной высотой (100px в вашем случае), который не будет удален из документа. – Kisaro

ОК, это было решение, я сделал это по-своему всего лишь секунду назад, теперь проблема в том, как это сделать с помощью screentouch, таких как планшеты, я хочу коснуться div раз, чтобы изменить высоту и снова в любом содержимом внутри, чтобы двигаться к этой ссылке, как обычно. (первый щелчок только перемещает вкладку, но никогда не открывает ссылку.9 –