CSS3 трансформации - альтернативный триггер? - PullRequest
Новая
       9

CSS3 трансформации - альтернативный триггер?

1 голос
/ 22 апреля 2011

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

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

Проблема

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

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

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

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

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

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

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

EDIT:

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

Ответы [ 2 ]

1 голос
/ 22 апреля 2011

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

Для этого проще всего использовать 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');
    })
0 голосов
/ 28 апреля 2011

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

Вещи, которые я изменил:

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