1

我试图在图像链接上放一个小插图，当悬停在消散时。我正在使用的当前代码在 Firefox 中运行良好，但在 chrome 中，过渡效果无法运行。

如果您要删除缩略图，则背景具有相同的效果并会在其上显示过渡。

这是一个错误吗？

<article>
                <div class="thumbnail">
                    <a href="#"><img src="images/download.jpg" alt="" /></a>
                </div>
                <div class="article-text">
                    <h3>Article Header</h3>
                    <div class="author">
                        Author Name here.  Date Posted Here.
                    </div>
                    <p>Lorem ipsum</p>
                    <div class="meta">
                        <ul class="meta-items">
                            <li>Arbitrary Number</li>
                        </ul>
                        <a class="button" href="#">
                            <span>Read More</span>
                        </a>
                    </div>
                </div>
            </article>

完整的 css/html 可以在 JSfiddle 上看到：http: //jsfiddle.net/aSTKK/

4

1 回答 1

1

不，这不是错误。伪元素上的转换仅在 Firefox 中有效（我个人希望将来能在其他浏览器中看到它们），尽管有一种方法可以为某些属性模拟它们。如果您删除缩略图，您会在元素本身（拥有它时位于图像下方）上看到过渡，而不是在伪元素上。

可能的解决方案：您可以使图像半透明并在悬停时将其不透明度更改为 1（请参阅我不久前做的示例库，尤其是第 3 行第 3 列）。

像这样的东西（我已将伪元素上的阴影更改为红色以使其更明显）。

相关CSS：

.thumbnail {
    width:48%;
    height:200px;
    float:left;
    padding:0;
    background:#37779f;
    box-shadow: inset 0 0 230px 40px rgba(0, 0, 0, 0.5);
    -webkit-transition: 1.3s;
    -moz-transition: 1.3s;
    transition: 1.3s;
    overflow:hidden;
    text-align:center;
}
.thumbnail a{
    position:relative;
    max-width:100%;
    float:left;
}
.thumbnail:hover{
    box-shadow:inset 0 0 115px 20px rgba(0,0,0,0.5);
}
.thumbnail a:after{
    content:'';
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    box-shadow:inset 0 0 115px 20px rgba(255,0,0,1);  
}
.thumbnail img {
    width:100%;
    height:auto;
    opacity: .3;
    -webkit-transition: 1.3s;
    -moz-transition: 1.3s;
    transition: 1.3s;
}
.thumbnail:hover img {   
    opacity: 1;
}​
于 2012-10-26T20:06:16.140 回答