html - 填充颜色的 CSS 过渡不适用于悬停 - Thinbug

填充颜色的 CSS 过渡不适用于悬停

时间：2020-12-23 17:48:08

标签： html css svg css-transitions fill

我将 SVG 路径的填充颜色设置为悬停时过渡。当您将鼠标悬停在图形上时它工作正常，但是当您将鼠标悬停而不是向后过渡时，颜色会回弹。怎么回事？

body {
  background: rgb(0, 185, 228);
}

a.facebookIcon {
  display: inline-block;
  margin: 20px;
}

a.facebookIcon svg {
  width: 42px;
  height: 42px;
}

a.facebookIcon svg path {
  fill: rgb(255, 255, 255);
}

a.facebookIcon:hover svg path {
  fill: rgb(182, 52, 187);
  transition: fill 3000ms;
}

<body>
  <a class="facebookIcon" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1017.78" viewBox="0 0 1024 1017.78">
  <path d="M1024,512C1024,229.23,794.77,0,512,0S0,229.23,0,512c0,255.55,187.23,467.37,432,505.78V660H302V512H432V399.2C432,270.88,508.44,200,625.39,200c56,0,114.61,10,114.61,10V336H675.44c-63.6,0-83.44,39.47-83.44,80v96H734L711.3,660H592v357.78C836.77,979.37,1024,767.55,1024,512Z"/>
</svg></a>

2 个答案:

答案 0 :(得分：2)

过渡仅添加到 :hover 状态，因此当您的鼠标离开时，它会忘记过渡。将过渡添加到初始状态。

a.facebookIcon svg path{
  fill: rgb(255,255,255);
  transition: fill 3000ms; //HERE
}

答案 1 :(得分：1)

像这样把transition: fill 3000ms;放到a.facebookIcon svg path中

a.facebookIcon svg path{
    fill: rgb(255,255,255);
  transition: fill 3000ms;
}
a.facebookIcon:hover svg path{
    fill: rgb(182,52,187);
}

而不是

a.facebookIcon svg path{
    fill: rgb(255,255,255);
}
a.facebookIcon:hover svg path{
    fill: rgb(182,52,187);
    transition: fill 3000ms;
}