html - 填充颜色的CSS过渡在悬停时不起作用
问题描述
我将 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>
解决方案
过渡只添加到:hover
状态中,因此当您的鼠标离开时,它会忘记过渡。将转换添加到初始状态。
a.facebookIcon svg path{
fill: rgb(255,255,255);
transition: fill 3000ms; //HERE
}
推荐阅读
- python - 如何从熊猫输出中删除名称和数据类型
- shell - “sort -t . -k 1,1n -k 2,2n -k 3,3n -k 4,4n”是如何工作的?
- html - 调整大小时,HTML 部分应位于图像中间
- javascript - 什么样的 JS 对象是 [foo: 'bar']
- python - 需要在bash中传递python数组中的对象
- c# - C# 将变量 double 转换为浮点数
- android - AudioRecord 同时播放音频 - 访问输出播放数据
- git - 如何在检查先前的提交并对其进行更改后推送提交
- matlab - MATLAB - 使用 buffer() 分割向量的问题
- php - 在 Woocommerce 的任何页面上仅显示单个链接的产品类别文本