CSS3 转换——备用触发器？

Question

无用的背景信息

大家好。这是我在这里发表的第一篇文章，但我经常来这里寻求帮助。 我是一名业余网页设计师，从事网页设计已经快一年了。

问题

我的问题是关于 CSS3 转换的。我的页面中心有一个小的圆形元素，当我将鼠标悬停在它上面时，它会成功转换。我有一个更大的圆形元素，按 z 索引，位于它的下面。较大的圆圈也有在​​ CSS 中编码的 CSS3 变换，但不会变换，甚至在悬停时不会触发。两个圆重叠，最小的在上面，形成同心圆。

我尝试的解决方案

一个词：Z-index。我尝试过将较大的圆圈放在上面，效果很好。问题是较小的圆圈不再触发...

我想要的结果

我希望圆圈保持在“同心”位置，而外部的较大圆圈通过：悬停进行变换。是否有可能有“备用触发器”？例如：在 JavaScript 中，我可以通过将鼠标悬停在我指定的任何元素上来触发动画。这可以在 CSS 中实现吗？我可以将鼠标悬停在元素 (I) 上并更改元素 (II) 的属性吗？如果我不能做到这一点，我将如何通过仅将鼠标悬停在一个圆圈上来触发两个圆圈的动画？我试图继续使用纯 CSS/HTML，但我会接受 JavaScript 答案。

最后的注释

我希望我已经提供了足够的信息以获得一个体面的答案...这是一个屏幕截图：https:// i.sstatic.net/WPj62.png 带有无穷大符号的圆是较小的圆元素。屏幕周围带有模糊边框的较大圆圈是另一个元素。

编辑：

有些事情仍然不对，请查看此处发布的完整代码：http:// cssdesk.com/eJ8BH

Answer 1

如果我理解你的问题，听起来当你将鼠标悬停在小圆圈上时，你希望大圆圈和小圆圈都变形，对吗？

最简单的方法可能是使用 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');
    })

Answer 2

为此，您不需要 jQuery。您需要在同心圆的父元素上应用 :hover ，然后将动画应用到其直接子元素，如下所示： http://jsfiddle.net/nimbu/taqr4/

我更改的内容：

• 更新为使用较短的过渡、动画属性
• 添加了 moz、o、无前缀属性
• 从 border-radius 中删除了 -webkit-
• 收集同心圆的共同属性以防止重复
• 修复不正确的背景颜色（#00000000）