为什么元素 .trigger-3 不会保持可见以便鼠标单击它？

问题描述 投票：0回答：1

我添加了 position: relative 到 .trigger-3 并设置 top: 0 和 opacity: 0 以使其最初隐藏。然后我们为 opacity 和 top 添加了一个过渡，延迟为 0.5s，以便在鼠标离开 .trigger-2 和 .trigger-3 后保持可见。

要使 .trigger-3 可点击，

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

html css clickable
1个回答
0
投票

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

你能试试这个吗

将 .trigger-2:hover+.trigger-3 更改为 .trigger-1:hover .trigger-3

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.