填充颜​​色的CSS过渡在悬停时不起作用[重复]

Posted

技术标签:

【中文标题】填充颜​​色的CSS过渡在悬停时不起作用[重复]【英文标题】:CSS transition of fill color not working on hover out [duplicate] 【发布时间】:2021-04-02 08:05:52 【问题描述】:

我将 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"   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>

【问题讨论】:

【参考方案1】:

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

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

【讨论】:

【参考方案2】:

像这样将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;

【讨论】:

以上是关于填充颜​​色的CSS过渡在悬停时不起作用[重复]的主要内容,如果未能解决你的问题,请参考以下文章

过渡在悬停时不起作用

为啥背景过渡:linear-gradient() 在悬停时不起作用?

CSS悬停过渡不起作用

悬停时div的背景图像转换不起作用[重复]

背景图像过渡在CSS中不起作用[重复]

CSS:在悬停时替换文本,但平滑过渡到新文本不起作用?