|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
03.03.2016, 16:46 | #1 |
Регистрация: 03.03.2016
Сообщений: 3
|
Выбор селектора
Добрый день уважаемые. У меня затык. Помогите пожалуйста советом.
При наведении курсора на .module-2 мне нужно воздействие на .element-2 и .element-1. Это вообще возможно?? Если да подскажите как, через запятую селекторы перечислить не работает, с пробелом между ними тоже... Код HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <htad> <title> animation1</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> p{text-align:center;} body{font-family:'times new roman',arial, sans-serif;} div.conteiner{ position:relative; left:200px; top:250px; width: 1485px; } div.module{ width:150px; height:150px; border:1px dashed grey; border-radius:10px; display: inline-block; margin-right: 30px; } .element{ width:148px; height:148px; border:1px dashed transparent; border-radius:10px; display: inline-block; margin-right: 30px; background:bisque; transform-origin: left bottom; } .module-1:hover .element-1{ animation-name:transform; animation-duration: 1s; animation-timing-function:linear; animation-fill-mode:forwards; } .module-2:hover .element-2{ animation-name:transform; animation-duration: 1s; animation-timing-function:linear; animation-fill-mode:forwards; } @keyframes transform{ 0%{transform:rotate(0deg);background:orange;} 100%{transform:rotate(110deg);background:purple;} } </style> </head> <body> <div class="conteiner"> <p>Наведите мышью на области</p> <div class="module module-1"> <div class="element element-1"></div> </div> <div class="module module-2"> <div class="element element-2"></div> </div> <div class="module module-3"> <div class="element element-3"></div> </div> <div class="module module-4"> <div class="element element-4"></div> </div> <div class="module module-5"> <div class="element element-5"></div> </div> <div class="module module-6"> <div class="element element-6"></div> </div> <div class="module module-7"> <div class="element element-7"></div> </div> <div class="module module-8"> <div class="element element-8"></div> </div> </div> </body> </html> |
03.03.2016, 18:22 | #2 |
Новичок
Джуниор
Регистрация: 03.03.2016
Сообщений: 4
|
Что-то мне кажется без javascript на чистом css нельзя.
Так как родительского селектора и предыдущего сестринского в css нет. Визуально можно. Вставляете в один модуль position:relative; left:180px; Вставляете в другой модуль position:relative; rigth:180px; Модули визуально меняются местами. И при hover на одном, вращаться будет другой и наоборот. Если надо такой эффект сразу для всех четырех, то расставьте их визуально в обратном порядке через свойство relative и обращайтесь к ним через сестринский селектор (div:hover+div) Последний раз редактировалось Nickf; 03.03.2016 в 18:30. |
03.03.2016, 18:23 | #3 | |
Старожил
Регистрация: 12.11.2010
Сообщений: 8,568
|
Цитата:
Однако, есть очень простое решение, но не знаю, подойдёт ли это вам. если вы хотите, чтобы при наведении на .module-2 у вас оказывалось воздействие на .element-1 и 2, то вы должны элементы .element-1 и 2 разместить внутри элемента с классом .module, после чего в CSS создать такие правила оформления: Код:
|
|
04.03.2016, 19:28 | #4 |
Форумчанин
Регистрация: 22.02.2016
Сообщений: 145
|
HTML CSS JavaScript
Возможно, если селектор будет относится к дочернему элементу или следующему. Предыдущий или родительский элемент в CSS не выразить, только JavaScript
Возьму в кредит мильён по 100% годовых на сто лет.
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Выбор БД | DmitryVisuals | БД в Delphi | 8 | 19.05.2013 18:20 |
Выбор БД | Рустам | БД в Delphi | 13 | 16.10.2012 14:02 |
Выбор БД | W0LF | БД в Delphi | 10 | 13.06.2012 08:12 |
ВЫБОР БД | chekanoff | БД в Delphi | 10 | 16.09.2009 20:15 |
выбор бд | Roof | БД в Delphi | 9 | 14.01.2009 08:04 |