使用jQuery为悬停时的SVG颜色和缩放设置动画

Question

我有一个我制作的图标，我试图改变悬停时的颜色，并通过它的当前位置左上角的白色方形刻度50％。

到目前为止，我可以在悬停进/出时更改正方形的颜色和比例，但我无法将头部包裹起来。 有朋友帮忙吗？

我的CodePen

Answer 1

我已添加此css3 transition ，以设置缩放和背景更改的转换时间：

.logo-square, .logo-bg{
  transition: 0.7s;
}

并使用此jQuery来扩展框:(因为您使用的是jQuery。 注意：您可以使用以下方法在纯CSS中执行此操作：hover selector ）

$('.logo-square').css({
    '-webkit-transform': 'scale(0.6)',
    '-moz-transform': 'scale(0.6)',
    '-o-transform': 'scale(0.6)'
});

和（回复）

$('.logo-square').css({
    '-webkit-transform': 'scale(1)',
    '-moz-transform': 'scale(1)',
    '-o-transform': 'scale(1)'
});

使用.css而不是.attr()

样本演示

更新： 您可以使用纯CSS来解决问题，使用:hover选择器

像这样：

.logo-square, .logo-bg{
  transition: 0.7s;
}

.bm-logo:hover > .logo-square{
   -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
}

.bm-logo:hover > .logo-bg, .bm-logo:hover > .logo-square{
  fill: #b565a7; 
}

示例演示 - 使用纯CSS