Question

看看这段代码：

我需要包含一个包含文本和svg图像的方框div，其中包含链接锚点＆lt; a＆gt; ：

<a href="#"> 
    <div id="block1">   
       <svg>...</svg>
       <div class="text">...</div>
   </div>
</a>

在悬停事件中，我想平滑地更改该svg图像的颜色（＆lt; path＆gt;元素的颜色）

#block1:hover #path1 {
   fill: #color;
   -webkit-transition: 0.8s all ease-in-out;
           .................................
           transition: 0.8s all ease-in-out;
}

这一切在Firefox上运行正常（尚未测试过Opera或Safari），在IE10和Chrome中无效，似乎有一个奇怪的加载错误：

当我打开jsFiddle页面时，它似乎工作，但如果我编辑代码并再次运行（不重新加载整个页面）锚内的块是闪烁的（没有平滑的颜色过渡）。如果我再次重新加载整个页面，它会再次运行。

在我的项目页面上，锚块在第一次加载时闪烁。我也尝试在本地加载我的项目页面，没有闪烁。

有谁能告诉我如何解决这个问题（至少在Chrome上）？谢谢

编辑：找到一个解决方案，使锚块元素绝对而不是包裹块：

<div id="block1" style="position:relative;>   
   <a href="#" style="position:absolute; display:block; 
               height:200px; width:400px; z-index=1"> </a>
   <svg>...</svg>
   <div class="text">...</div>
</div>

这是可接受的做法吗？仍然无法在IE10上工作..

锚内的CSS过渡错误（Chrome和IE）

0 个答案: