Question

我用CSS和SVG制作了这个动画图标：

.twitter-outline {
	fill: none;
	stroke: #4099ff;
}

.twitter-icon {
	fill: transparent;
	stroke: transparent; 
}

.twitter-outline, .twitter-icon {
	transition: 600ms all;
	transform-origin: 50% 50%;
}

.twitter-icon-group:hover .twitter-outline {
	transform: scale(0);
	opacity: 0;
}

.twitter-icon-group:hover .twitter-icon {
	transform: scale(2);
	fill: #4099ff;
	opacity: 0;
}

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="200" viewBox="0 0 500 200">
  <g class="twitter-icon-group">
              <circle class="twitter-outline" cx="110.6" cy="100.5" r="35.2"/>

              <path fill="#4099ff" d="M125.4 91.8c-1 .5-2.3 1-3.5 1 1-.8 2-2 2-3.4-1 .7-2.6 1.2-4 1.5-1-2-2.6-2-4.4-2-3.3 0-6 2-6 6v1c-5-.6-9.4-3-12.4-6.7-.6 1-1 2-1 3 0 2 1.2 4 2.8 5-1 0-2-.2-2.6-.7 0 3 2 5.4 5 6l-1.8.2h-1c.6 2.2 3 4 5.5 4-2 1.6-4.6 2.6-7.5 2.6h-1c2.4 1.5 5.5 2.5 9 2.5 11 0 17.2-9.3 17.2-17.3 1.2-1 2.2-2 3-3.2z"/>

              <path class="twitter-icon" d="M125.4 91.8c-1 .5-2.3 1-3.5 1 1-.8 2-2 2-3.4-1 .7-2.6 1.2-4 1.5-1-2-2.6-2-4.4-2-3.3 0-6 2-6 6v1c-5-.6-9.4-3-12.4-6.7-.6 1-1 2-1 3 0 2 1.2 4 2.8 5-1 0-2-.2-2.6-.7 0 3 2 5.4 5 6l-1.8.2h-1c.6 2.2 3 4 5.5 4-2 1.6-4.6 2.6-7.5 2.6h-1c2.4 1.5 5.5 2.5 9 2.5 11 0 17.2-9.3 17.2-17.3 1.2-1 2.2-2 3-3.2z"/>
        </g>          
</svg>

如果一个人用鼠标悬停在图标上，那么外圈就会消失。

有效。但是必须用鼠标指针进入圆圈。当一个人（几乎）然后到达鸟类时，动画就会被触发。

我希望在圈子徘徊之后立即触发它。

因为这就是我的代码所说的：“。 twitter-icon-group：hover .twitter-outline {”

这里出了什么问题？我已经尝试删除SVG组中的填充。但这没有用。

怎样才能让它在悬停状态时触发悬停状态？

Answer 1

这是因为circle没有fill，因此只能悬停实际的“路径”。

只需将fill更改为transparent。

编辑：正如@RobertLongson所指出，我们应该使用pointer-events:fill而不是fill:transparent。

Codepen Demo

Pointer-Events @ MDN

<强>填

仅限SVG。当指针位于元素的内部（即填充）上时，该元素只能是鼠标事件的目标。填充和可见性属性的值不会影响事件处理

.twitter-outline {
  fill: none;
  pointer-events: fill;
  stroke: #4099ff;
}
.twitter-icon {
  fill: transparent;
  stroke: transparent;
}
.twitter-outline,
.twitter-icon {
  transition: 600ms all;
  transform-origin: 50% 50%;
}
.twitter-icon-group:hover .twitter-outline {
  transform: scale(0);
  opacity: 0;
}
.twitter-icon-group:hover .twitter-icon {
  transform: scale(2);
  fill: #4099ff;
  opacity: 0;
}

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="200" viewBox="0 0 500 200">
  <g class="twitter-icon-group">
    <circle class="twitter-outline" cx="110.6" cy="100.5" r="35.2" />

    <path fill="#4099ff" d="M125.4 91.8c-1 .5-2.3 1-3.5 1 1-.8 2-2 2-3.4-1 .7-2.6 1.2-4 1.5-1-2-2.6-2-4.4-2-3.3 0-6 2-6 6v1c-5-.6-9.4-3-12.4-6.7-.6 1-1 2-1 3 0 2 1.2 4 2.8 5-1 0-2-.2-2.6-.7 0 3 2 5.4 5 6l-1.8.2h-1c.6 2.2 3 4 5.5 4-2 1.6-4.6 2.6-7.5 2.6h-1c2.4 1.5 5.5 2.5 9 2.5 11 0 17.2-9.3 17.2-17.3 1.2-1 2.2-2 3-3.2z"
    />

    <path class="twitter-icon" d="M125.4 91.8c-1 .5-2.3 1-3.5 1 1-.8 2-2 2-3.4-1 .7-2.6 1.2-4 1.5-1-2-2.6-2-4.4-2-3.3 0-6 2-6 6v1c-5-.6-9.4-3-12.4-6.7-.6 1-1 2-1 3 0 2 1.2 4 2.8 5-1 0-2-.2-2.6-.7 0 3 2 5.4 5 6l-1.8.2h-1c.6 2.2 3 4 5.5 4-2 1.6-4.6 2.6-7.5 2.6h-1c2.4 1.5 5.5 2.5 9 2.5 11 0 17.2-9.3 17.2-17.3 1.2-1 2.2-2 3-3.2z"
    />
  </g>
</svg>

Answer 2

你的问题是圆圈只有1像素宽。当您悬停实际的圆形路径而不是图标和路径之间的空格时，它处于悬停状态。

CSS- / SVG-animation：为什么不立即触发悬停状态？

2 个答案: