How to delay a css :hover

Question

I simply would like to know if it is possible to delay the change of position of vbtn01 in the following code

@media only screen and (orientation:portrait){
 #vimg01:hover{#vbtn01{position:relative; top:-940px;} }
}

Thank you in advance

• C3roe: Put a transition with the desired transition-delay (and no duration) on the property. developer.mozilla.org/en-US/docs/Web/CSS/transition

Answer 1

@media only screen and (orientation:portrait) {
#vbtn01 {
 position: relative;
 top: 0;
 transition: top 0.5s ease 0.5s;
}
#vimg01:hover+#vbtn01 {
 top: -940px;
}

}

• Mark Rotteveel: Although this code might answer the question, I recommend that you also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes.