html - 应用于嵌套类的过渡效果不起作用

我想将鼠标悬停在一个div上，以使另一个嵌套的div出现，但是过渡延迟似乎不起作用。有任何想法吗？

 .vm:hover > .sparkline {
        position: relative;
        top: -10em;
        left: 10em;
        width: 640px;
        height: 480px;
        background-image: url(../images/sparkline.png);
        transition-delay: 3s;
      }

最佳答案

首先，您需要忽略哪个属性会受过渡影响，并为正常状态和悬停状态定义不同的值。如果要显示div，则此属性为opacity或display。

.vm > .sparkline {
    position: relative;
    top: -10em;
    left: 10em;
    width: 640px;
    height: 480px;
    background-image: url('../images/sparkline.png');
    opacity: 0;
    transition: opacity 1s ease 3s;
}
.vm:hover > .sparkline {
    opacity: 1;
}

在transition: opacity 1s ease 3s; 3s行中-是transition-delay参数。

关于html - 应用于嵌套类的过渡效果不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41267148/