CSS3 преобразует альтернативный триггер?

Бесполезная справочная информация

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

Проблема

Мой вопрос касается преобразований CSS3. У меня есть небольшой круглый элемент в центре моей страницы, который успешно трансформируется при наведении на него курсора. У меня есть больший круглый элемент, который находится под ним по z-индексу. Большой круг также имеет преобразование CSS3, закодированное в CSS, но не преобразуется и даже не срабатывает при наведении курсора. Оба круга накладываются друг на друга, самый маленький сверху, образуя концентрические круги.

Моя попытка решения

Одно слово: Z-индекс. Я попытался поставить больший круг сверху, и он отлично работает. Проблема в том, что меньший круг больше не срабатывает...

Результат, которого я хочу

Я хотел бы, чтобы круги оставались в своих «концентрических» положениях, а больший круг снаружи трансформировался с помощью: hover. Возможно ли иметь «альтернативный триггер»? например: в JavaScript я могу запустить анимацию, наведя курсор на любой элемент, который я укажу. Возможно ли это сделать в CSS? Могу ли я навести курсор на элемент (I) и изменить свойства элемента (II)? Если я не могу этого сделать, как мне запустить анимацию для обоих кругов, наведя курсор только на один? Я пытаюсь придерживаться чистого CSS/HTML, но приму ответы JavaScript.

Последние заметки

Надеюсь, я предоставил достаточно информации для достойного ответа... Вот скриншот: http://i.stack.imgur.com/WPj62.png Круг со знаком бесконечности — это меньший элемент круга. Большой круг со слабой окантовкой вокруг экрана — это другой элемент.

ИЗМЕНИТЬ:

Что-то по-прежнему не так, взгляните на полный код, размещенный здесь: http://cssdesk.com/eJ8BH


html css transform elements
person Anonymous Blah    schedule 22.04.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Если я правильно понял ваш вопрос, похоже, что когда вы наводите курсор на маленький круг, вы хотите, чтобы и большой, и маленький круг трансформировались, верно?

Самый простой способ, вероятно, использовать для этого javascript. Если вы используете jQuery, это еще проще:

$('.littleCircle')
    .hover(function(){
        $(this).addClass('myTransformationClass');
        $('.biggerCircle').addClass('myTransformationClass');
})

ОБНОВЛЕНИЕ: Еще несколько примеров, основанных на обратной связи.

Вот что я бы сделал. Во-первых, дайте всем 4 связанным элементам класс, чтобы вы могли получить их через jQuery. Для примера я использую .rolloverSet

// grab all 4 elements and cache them
$rolloverSet = $('.rolloverSet');

// grab the one element that needs to have two classes
$otherElement = $rolloverSet.find('.otherElement');

$rolloverSet
    .hover(function(){ // we'll add a hover event to each element in the group
        $(this).addClass('myTransformationClass');
        $otherElement.addClass('myOtherTransformationClass');
    })
    .blur(function(){ // remove the classes on mousout
        $(this).removeClass('myTransformationClass');
        $otherElement.removeClass('myOtherTransformationClass');
    })
person DA.    schedule 22.04.2011
comment
Вы правильно поняли мой вопрос, но есть еще один момент... Меньший круг состоит из двух элементов, тогда как больший круг состоит только из одного. Кроме того, первый элемент, образующий меньший круг, имеет один класс преобразования, второй — другой класс преобразования, а один элемент, образующий больший круг, имеет два класса преобразования. Итак, как я могу использовать JavaScript для наведения на три элемента с четырьмя классами преобразования? Я ценю вашу помощь. ССЫЛКА НА КОД: cssdesk.com/eJ8BH - person Anonymous Blah; 22.04.2011
comment
Логика была бы той же самой... при наведении курсора на один из 4 элементов необходимо было бы применить ваши классы преобразования ко всем 4. Готовы ли вы использовать jQuery? - person DA.; 22.04.2011
comment
Большое спасибо!! Это мне очень помогает! - person Anonymous Blah; 22.04.2011

arrow_upward
0
arrow_downward

Для этого вам не нужен jQuery. Вам нужно применить :hover к родительскому элементу концентрических кругов, а затем применить анимацию к его непосредственным дочерним элементам следующим образом: http://jsfiddle.net/nimbu/taqr4/

Что я изменил:

  • Обновлено для использования более коротких переходов, свойство анимации
  • Добавлены свойства moz, o, без префикса
  • Удален -webkit- из радиуса границы
  • Собраны общие свойства концентрических кругов, чтобы предотвратить повторение
  • Исправлен неверный цвет фона (#00000000)
person Divya Manian    schedule 28.04.2011