4

在 Chrome 和 Safari 中，CSS 过渡.divisions a以及它的子元素都被应用，img并且span图像变大并且标题淡入。然而，Firefox 只有过渡.divisions a，子元素会跳转到它们的新状态而没有任何过渡。

我不确定这个问题是否是同一个问题。如果在 Firefox 中无法解决此问题，是否有针对该浏览器的解决方法，以便将转换应用于子元素？

基本 HTML：

<nav class="divisions">
    <ul>
        <li class="">
           <a href="#"><img src="./images.png" alt="" width="150" height="150">
             <span>Here's a caption</span></a>
        </li>
    </ul>
</nav>

相关 CSS（还有更多，预转换）：

.divisions a, .divisions a img, .divisions a span {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
.divisions a:hover {
    height: 270px;
    padding: 10px 0;
    overflow: visible;
}
.divisions a:hover img {
    width: 150px;
    height: 150px;
}
.divisions a:hover span {
    opacity: 1.0;
}

http://jsfiddle.net/mblase75/f5FKU/

4

1 回答 1

3

事实证明，因为overflow不是一个可转换的属性，更改.divisions a:hover为overflow:visible打破了所有子元素的转换（但不是a它本身，很奇怪）。

删除该属性足以使 Firefox 中的一切正常工作：http: //jsfiddle.net/mblase75/f5FKU/17/

.divisions a:hover {
    height: 270px;
    padding: 10px 0;
 /* overflow: visible; */
}

另请参阅此问题。

于 2013-06-03T21:06:12.857 回答