why element .trigger-3 won't stay visible for mouse to click it?

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>

Solution

.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-1: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