Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 20.12.2014, 10:42   #1
Parallelogram
Недотепа
Форумчанин
 
Регистрация: 18.01.2011
Сообщений: 174
По умолчанию Запуск трансформации через другой div

Здравствуйте.
Код HTML:
<div class='s0'>
<div class='s1'></div>
<div class='s2'></div>
</div>
Возможно ли при наведении на блок "s0" запускать трансформации блоков "s1" и "s2". Ну или подскажите как можно можно это сделать? Спасибо.
P.s.: У каждого блока своя независимая анимация, которая должна запускаться одновременно на всех блоках, но до тех пор пока курсор на div s0.
Parallelogram вне форума Ответить с цитированием
Старый 20.12.2014, 18:50   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Пожалуй выберу первый вопрос, по причине его повышенной простоты: возможно.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 21.12.2014, 03:10   #3
Parallelogram
Недотепа
Форумчанин
 
Регистрация: 18.01.2011
Сообщений: 174
По умолчанию

А теперь давайте хоть немного попытаемся мне помочь. Спасибо.
Parallelogram вне форума Ответить с цитированием
Старый 26.12.2014, 07:12   #4
Parallelogram
Недотепа
Форумчанин
 
Регистрация: 18.01.2011
Сообщений: 174
По умолчанию

Теория такая. Следы. Все же помнят как они появляются на снегу, когда идешь, и как их заносит со временем снегом до полного исчезновения. http://jsfiddle.net/a11ruLn8/
Я сделал, чтобы при наведении на блок, следы появлялись, а после вывода курсора за блок, следы постепенно исчезали. Но мне нужно чтобы они появлялись и исчезали без вывода курсора за пределы блока. Как это сделать? Подскажите.
Код HTML:
<style type="text/css">
.vtor{height:100px; width:100px; border:1px solid;position:absolute;z-index:1;}
.tret{height:20px; width:20px;opacity:0; background-color:#f00; transition: 3s all 0s;}
.chet{height:20px; width:20px;opacity:0; background-color:#00f; transition: 3s all 1s;}
.patt{height:20px; width:20px;opacity:0; background-color:#0f0; transition: 3s all 2s;}
.shes{height:20px; width:20px;opacity:0; background-color:#0ff; transition: 3s all 3s;}
.vtor:hover ~ .tret{opacity:1; transition:.5s ease opacity 0s;}
.vtor:hover ~ .chet{opacity:1; transition:.5s ease opacity 1s;}
.vtor:hover ~ .patt{opacity:1; transition:.5s ease opacity 2s;}
.vtor:hover ~ .shes{opacity:1; transition:.5s ease opacity 3s;}
</style>
<div class='perv' id='perv'>
	<div class='vtor'></div>
	<div class='tret'></div>
	<div class='chet'></div>
	<div class='patt'></div>
	<div class='shes'></div>
</div>
Parallelogram вне форума Ответить с цитированием
Старый 26.12.2014, 20:48   #5
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

я так понял, тебе нужна анимация вне зависимости от событий, для этого юзай animation и @keyframes
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отображение в div-блоке одной страницы содержимого другой stas135642 HTML и CSS 3 30.11.2012 12:43
Запуск одной программы из другой. Диман56 Общие вопросы C/C++ 9 03.11.2011 17:10
Запуск макроса из другой книги Olper Microsoft Office Excel 14 17.10.2011 10:50
Заполнение через список выбора одного диапазона таблиц через другой P10neer Microsoft Office Excel 5 23.12.2010 23:44
Высота div-a в котором есть другой div Antoha HTML и CSS 2 07.08.2009 18:16