Question

我已经尝试解决了几个小时的问题，非常感谢您的帮助。

目标是当鼠标悬停在图像上时，获得“平滑过渡”。我玩弄不透明等，但没有任何效果。

HTML代码：

<div class="montage">
    <p>Add</p>
    <img id="montage" src="Imagesnya/montage2.jpg" alt="">
</div>
<div class="borttagning">
    <p>Remove</p>
    <img id="borttagning" src="Imagesnya/borttagning3.jpg" alt="">
</div>

CSS

.borttagning {
    margin-left: 9%;
    margin-top: 31%;
    position: absolute;
}

.borttagning img {
    height: auto;
    width: auto;
    opacity: 0;
}

.borttagning:hover img {
    opacity: 1;
    -webkit-transition: opacity 1s ease-in-out;
       -moz-transition: opacity 1s ease-in-out;
         -o-transition: opacity 1s ease-in-out;
            transition: opacity 1s ease-in-out;
}

#borttagning {
    width: 64.0%;
    margin-top: 5.8%;
    margin-left: -24.25%;
}

.montage {
    margin-left: 18%;
    margin-top: 10%;
    position: absolute;
}

.montage img {
    height: auto;
    width: auto;
    opacity: 0;
}

.montage:hover img {
    opacity: 1;
    -webkit-transition: opacity 1s ease-in-out;
       -moz-transition: opacity 1s ease-in-out;
         -o-transition: opacity 1s ease-in-out;
            transition: opacity 1s ease-in-out;
}
#montage{ 
    width: 64.0%;
    margin-top: -13.7%;
    margin-left: -23.53%;
}

谁知道我做错了什么？

Answer 1

尝试一下：http://jsfiddle.net/3fvn8uoa/3/

在正常状态下添加transition而不是:hover可以解决问题（不过，根据我的说法，您的代码也应该可以）

更新：看到问题注释中提供的网站链接，您正在将黑白display: none转换为display: block，因为{{1 }}属性不受支持。您将实现上面的jsfiddle中所示的内容

平滑过渡悬停图像

1 个答案: