2

我创建了这个 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/

4

1 回答 1

1

这里有几个问题：

首先，您的transitionandtransform-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/

于 2014-11-12T05:17:33.870 回答