CSS3转换在webkit中的行为不符合预期

第一次海报，对网页设计来说是相当新的。我的设计有一个图像，悬停时，通过css3变换在左侧、顶部和右侧显示图像

当鼠标悬停时，这些图片会弹出，我想把鼠标悬停在新图片上，这样我就可以点击它们作为链接了

这在IE10和Firefox中似乎效果很好，但在WebKit浏览器中有些失败。我看到的问题是，当鼠标悬停在新转换的div上时，转换将稍微闪烁，然后在div中的任意点返回到其原始状态

正如我所说，这在Firefox和IE10中运行良好，我可以在新的div上悬停并单击它们而不会出现问题。使用WebKit，有时我可以单击div，有时我只能在div缩回之前滚动到一半

相关代码如下：

<div id="logo">
<img id="mainLogo" src="Images/logo.png" style="width:320px;" />
<div id="div1">
<a href=""><img src="Images/box1.png" style="width:320px" /></a>
</div>
<div id="div2">
<a href=""><img src="Images/box3.png" style="width:320px" /></a>
</div>
<div id="div3">
<a href=""><img src="Images/box2.png" style="width:320px" /></a>
</div>
</div>

---

使用JSFIDLE或类似工具提供一个工作示例将对您有所帮助。当我将鼠标悬停在主元素上，右边的框出现时，它会消失，然后在webkit中滚动到边缘。在Chrome 23中似乎对我有效…有趣的是，我在Windows中尝试了它，它似乎有效，其他Mac用户可以验证这是一个问题吗？在OS X 10.7上的Chrome 23中为我工作。