Question

我创建了这个SVG，并添加了一些内联CSS来创建悬停效果，但它不起作用。虚线圆圈不会移动和旋转，只会改变不透明度。另外，像普通的css转换一样，鼠标没有转换。我该如何解决这个问题？

.wrap:hover .dash {
   opacity: 0.2;
   transform: rotate(90deg);
   -webkit-transform: rotate(90deg);
   transform: translateX(10px);
   -webkit-transform: translateX(10px);
   transform-origin: 50% 50%;
   -webkit-transform-origin: 50% 50%;
   transition: 0.3s linear;
}

指向我的代码的链接：http://jsfiddle.net/7s4vszu3/1/

Answer 1

这里有几个问题：

首先，您应在没有悬停选择器的情况下设置transition和transform-origin。这就是你没有看到鼠标移出的正确转换的原因。其次，您需要在同一规则中包含转换，以便不会覆盖另一个规则。在您的代码中，您的translate会覆盖您的rotate。

这里应该是什么样子：

.wrap .dash {
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transition: transform 1s linear, opacity 1s linear;
}

.wrap:hover .dash {
    opacity: 0.2;
    transform: rotate(90deg) translateX(10px);
    -webkit-transform: rotate(90deg) translateX(10px);
}

此处示例：http://jsfiddle.net/unc3re9b/

为什么我的css3悬停效果在SVG中不起作用？

1 个答案: