I added position: relative to .trigger-3 and set top: 0 and opacity: 0 to make it hidden initially. Then we added a transition to both opacity and top, with a delay of 0.5s, so that it stays visible after the mouse leaves .trigger-2 and .trigger-3.
To make .trigger-3 clickable,
.trigger-1:hover .trigger-2 {
background-color: red;
display: block;
transition: background-color 0.5s ease;
}
.trigger-3 {
display: none;
position: relative;
top: 0;
opacity: 0;
transition: opacity 0.5s ease 0.5s, top 0.5s ease 0.5s;
z-index: 0;
/* Here I think I have missed something ...*/
}
.trigger-2:hover+.trigger-3,
.trigger-3:hover {
background-color: red;
display: block;
top: 10px;
opacity: 1;
transition: opacity 0.5s ease, top 0.5s ease;
z-index: 1;
}
.trigger-3 a {
display: block;
padding: 10px;
color: white;
text-decoration: none;
position: relative;
z-index: 2;
}<!DOCTYPE html>
<html>
<head>
<title> Trigger Animation Example </title>
</head>
<body>
<pre> created a div container with class="trigger-1" that contains two other div elements: class="trigger-2" and class="trigger-3" </pre>
<div class="trigger-1">
<div class="trigger-2">Hover over me</div>
<div class="trigger-3">
<a href="https://example.com">Clickable Link</a>
</div>
</div>
</body>
</html>
can you try this
changed .trigger-2:hover+.trigger-3 to .trigger-1:hover .trigger-3