Использование CSS3 для условного оформления?

Question

Хорошо, вот сценарий:

Скажем, у меня есть такая установка:

<ul>
    <li>
        <span></span>
    </li>
</ul>

И я использую CSS, чтобы установить стили для больших плавающих блоков ... Использование css: hover и: active (условия?) Для изменения стиля, такого как цвет фона и высота и т. Д. ...

Теперь вопрос - Используя JUST css, могу ли я определить его так:

• Собственно, Ли имеет высоту 100px, а диапазон имеет высоту 0px
• при наведении, высота li увеличивается до 150px, а высота пролета увеличивается до 50px?

Это приведет к анимации, похожей на прямоугольник с обычным текстом, при наведении на него появится изображение, дополняющее текст.

РЕДАКТИРОВАТЬ - Вот ссылка на скрипку, демонстрирующую, к чему я стремился. Желтая часть должна быть внешним изображением. Это было достигнуто путем реализации решения, предусмотренного в этом вопросе.

http://jsfiddle.net/abhi/JMz8F/2/embedded/result/

Answer 1

li { height: 100px }
li > span { display: none; height: 50px }
li:hover { height: 150px }
li:hover > span { display: block }

Answer 2

Поскольку вы говорите конкретно об анимации css3, я предполагаю, что вам не безразличен ни Internet Explorer, ни более старые версии браузеров.

С этим в стороне, посмотрите эту скрипку - http://jsfiddle.net/ZYaKh/3/

Answer 3

li { height: 100px; }
li span { height: 0; }

li:hover { height: 150px; }
li:hover span { height: 50px; }

Кстати, :hover просто называется псевдокласс . Кроме того, поддержка :hover для несвязанных элементов схематична в IE7 и ниже.

Answer 4

Анимации можно выполнять с помощью свойства transition и его под-свойств, а также специфичных для браузера префиксов (в настоящее время -webkit-, -moz-, -o- и -khtml-):

transition: height 0.5s ease-in-out; /* transition the height for half a second using 2-way easing */

Вы можете добавить несколько свойств и использовать кубическую кривую Безье для функции замедления.Вокруг Google можно найти много полезных ресурсов.