2

看看这段代码：

jsFiddle 代码

我需要用链接锚 < a > 包装一个包含文本和 svg 图像的框 div：

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

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

#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还是不行。。

4

0 回答 0