CSS3 Transforms -- Alternate Trigger?

Usless Background Info

Hello, all. This is my first post here, but I often come here for help. I am an amateur web designer and have been in web designing for almost a year now.

The Problem

My question is about CSS3 transforms. I have a small, circular element in the center of my page that transforms successfully when I hover over it. I have a larger circular element that is, by z-index, underneath it. The larger circle also has CSS3 transforms coded in the CSS, but will not transform, or even triggerd when hovered over. Both circles are overlaid, with the smallest on top, to create concentric circles.

My Attempted Solution

One word: Z-index. I have tried putting the larger circle on top, which works fine. The problem with this is that the smaller circle no longer triggers...

The Result I Want

I would like for the circles to remain in their 'concentric' positions and for the larger circle on the outside to transform by :hover. Is it possible to have an 'alternat开发者_开发技巧e trigger'? e.g.: in JavaScript, I can trigger an animation by hovering over any element that I specify. Is this possible to do in CSS? Can I hover element (I), and change properties for element (II)? If I cannot do this, how would I go about triggering animations for both circles, by hovering over only one? I am trying to stay with pure CSS/HTML, but I will accept JavaScript answers.

Last Notes

I hope I have provided ample info for a decent answer... Here is a screenshot: http://i.stack.imgur.com/WPj62.png The circle with the infinity sign is the smaller circle element. The larger circle with the faint border around the screen is the other element.

EDIT:

Something's still not right, please take a look at the full code posted here: http://cssdesk.com/eJ8BH

If I understand your question, it sounds like when you hover over the small circle, you want both the large and small circle to transform, correct?

The easiest way is likely to use javascript for this. If you are using jQuery, it's even easier:

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

UPDATE: Some further examples based on follow-up feedback.

Here's what I'd do. First, give all 4 related elements a class so you can grab them via jQuery. For the example I use .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');
    })

You do not need jQuery for this. You need to apply :hover on the parent element of the concentric circles and then apply the animation to its immediate children like this: http://jsfiddle.net/nimbu/taqr4/

Things I changed:

• Updated to use shorter transitions, animations property
• Added moz, o, unprefixed properties
• Removed -webkit- from border-radius
• Gathered common properties of concentric circles to prevent repetition
• Fixed incorrect background-color (#00000000)