应用于嵌套类的过渡效果无效

Question

我想将鼠标悬停在一个div上以显示另一个嵌套div，但转换延迟似乎不起作用。有什么想法吗？

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

Answer 1

首先，您需要确定哪个属性会受到转换的影响，并为正常和悬停状态定义不同的值。如果您想显示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参数。