當我懸停在一個div上時，我希望有一個從左到右滑動的覆蓋層，然後在1秒延遲後內容變得可見。這是我的HTML程式碼：
/* overlay */ .overlay { position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(255, 255, 255, 0.9); overflow: hidden; width: 0; height: 100%; transition: .5s ease; } .dv-each:hover .overlay { /* transition-delay: 0.4s; */ transition: .5s ease-in-out; width: 100%; } .overlay-content { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); white-space: nowrap; } 當您懸停在圖像上時，可以看到白色背景會滑動，內部內容將會顯示出來。我想要延遲1秒才顯示。您能幫助我嗎？謝謝。
 }})
希望這是您所尋找的。
請更改照片的URL。我使用了從網路上找到的一張照片。
.overlay { position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(255, 255, 255, 0.9); overflow: hidden; width: 0; height: 100%; transition: .5s ease; transition-delay: 1s; /* Set Delay Duration */ } .dv-each:hover .overlay { transition: .5s ease-in-out; width: 100%; transition-delay: 0s; } .overlay-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; opacity: 0; transition: opacity 1s ease; .dv-each:hover .overlay-content { opacity: 1; }