Question

在我的新主页上工作，在wordpress中使用html编辑器，因为wordpress主题会像我所有的hec一样减慢我的网站速度。我几乎准备好了，只是想知道我是如何完成以下任务的：

On my staging page here you can see 另一张图像出现在它前面。我希望在鼠标离开图像后该图像淡出。

这是我的代码：

<div class="imageBox">
<div class="imageInn">
    <img src="https://pausethemoment.photography/wp-content/uploads/2017/07/Melbourne-Wedding-Photography-Pause-The-Moment-Beach-Wedding-Photography-610x345.jpg" alt="Sandringham Melbourne Wedding Photography - Sun sets on couple on a beach.">
</div>
<div class="hoverImg">
    <a href="https://pausethemoment.photography/contact-us/"><img src="https://pausethemoment.photography/wp-content/uploads/2017/07/Wedding-Photography-Melbourne-Limited-Dates-Overlay.png" alt="Pause The Moment Melbourne Wedding Photography" width="610" height="345" class="aligncenter size-full wp-image-14308" /></a>
</div>
</div>

然后这个CSS：

.imageBox 
    {
        position: relative;
        float: left;
    }
    .imageBox .hoverImg {
        visibility:hidden;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        transition: visibility 0s, opacity 0.5s linear;
    }
    .imageBox:hover .hoverImg {        
        display: block;
        visibility: visible;
        opacity: 1;
    }

尝试使用

上的:: after标签

 .imageBox .hoverimage

以各种格式：

.imageBox:hover::after .hoverImg 
        {
        visibility:visible;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        }

但无济于事。也玩过动画延迟等，但似乎无法让它留在那里！试过webkit过渡但我甚至无法让它们淡入。任何帮助都非常感谢！

Answer 1

问题似乎在于使用visibility属性。 CSS转换不知道如何在“可见”和“隐藏”之间生成中间值，因为这些值不是数字。

尝试删除所有可见性并仅将过渡应用于不透明度。

.imageBox {
    position: relative;
    float: left;
}
.imageBox .hoverImg {
    /*visibility:hidden;*/
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: /*visibility 0s,*/ opacity 0.5s linear;
}
.imageBox:hover .hoverImg {        
    display: block;
    /*visibility: visible;*/
    opacity: 1;
}

使用CSS将鼠标离开区域后淡出显示在悬停上的图像

1 个答案: