Question

我正试图在图像链接上添加一个小插图，当它悬停在消散时。我正在使用的当前代码在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>

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

Answer 1

不，这不是一个错误。伪元素的转换仅适用于Firefox（个人而言，我希望将来可以在其他浏览器中使用它们），there is a way to emulate them for some properties。如果删除缩略图图像，则会看到元素本身的转换（当您拥有它时位于图像下方），而不是伪元素。

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

Something like this（我已经将伪元素上的阴影更改为红色，以使其更加明显。）

相关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;
}

图片上的Chrome嵌入框阴影，转换无法正常工作

1 个答案: