Why my css3 hover effect doesn't work in SVG?

I created this SVG and put in some inline CSS to create a hover effect but it doesn't work. The dashed circle doesn't move and rotate, it only changes opacity. In addition, there's no transition on mouse out like normal css transition. How can I fix this ?

.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;
}

The link to my code fiddle: http://jsfiddle.net/7s4vszu3/1/

Problem courtesy of: user25808

Solution

There are a couple of issues here:

First, your transition and transform-origin should be set without the hover selector. This is the reason you weren't seeing the proper transition on mouse out. Second, you need to include both your transformations in the same rule, so that one doesn't overwrite the other. In your code, your translate is overwriting your rotate .

Here's what it should look like:

.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);
}

Example here: http://jsfiddle.net/unc3re9b/

Solution courtesy of: Casey Rule

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow .

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章