Може ли
и как, с едно събитие да се предизвикат транзишъни на повече от един обект едновременно? Пример - два обекта с различен z-index се припокриват на екрана, като единия скрива другия. При достъпване на полето, където са те, hover се стилира така, че горният да промени своето opacity, а долният да се завърти както снимката от урока. Или друг пример - при достъпване, два обекта от различни места на екрана да се задвижат и претърпявайки разнотипни трансформации по пътя си да се срещнат на някакво място от екрана.
Здравейте, Юлиан, да, може да предизвикате транзишъни на няколко обекта едновременно. Събитието "hover" може да бъде приложено към общ родител на двата обекта и да се дефинират различни транзишъни за всеки от обектите. При движение на мишката над родителя, транзишъните ще бъдат задействани за всички негови деца.
За да предизвикате транзишъни на няколко обекта едновременно с едно събитие, може да използвате CSS селекторите и псевдо-класове.
Нека имаме следната HTML структура:
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
Можем да добавим CSS правила за всеки от обектите (в случая .box1 и .box2) с различни transition стойности.
.box1 {
opacity: 1;
transition: opacity 1s;
}
.box2 {
transform: rotate(0deg);
transition: transform 1s;
}
След това може да добавим псевдо-класа :hover към .container, който ще предизвика промяна на стойностите на .box1 и .box2, когато се достъпи с мишка:
.container:hover .box1 {
opacity: 0;
}
.container:hover .box2 {
transform: rotate(180deg);
}
По този начин, когато се достъпи .container, ще се предизвикат транзиции на .box1 (промяна на непрозрачността) и на .box2 (завъртане на 180 градуса).
По същия начин, ако искате два обекта да се движат от различни места на екрана и да се срещнат на едно място при hover, можете да използвате transform: translate(x, y) с различни стойности за x и y за всяка от кутиите. Когато hover събитието се задейства, двата обекта ще се движат към срещната точка.
Вашият отговор
