CSS 只有带输入的手风琴 - 出现隐藏的超链接

Question

我只制作了一个 CSS 手风琴...（我特别被要求在没有 JavaScript 的情况下制作它）。

到目前为止，我的代码运行良好。我正在使用 <input type="checkbox" checked="checked" /> 来实现这一点。

我遇到的问题是，我 hiding/toggling 的内容包含超链接。当我的手风琴关闭时，超链接仍然可以点击，即使手风琴关闭。

IE - 如果将鼠标悬停在副本 "Choose another cool destination" 下的 40px-50px 范围内，您将看不到内容。但是您仍然可以将鼠标悬停在（不可见的）超链接上。甚至点击它们。

我怎样才能阻止这种情况发生？

我不希望我的超链接可以点击。仅当手风琴打开时！

这是一个代码笔，您可以在其中看到： https://codepen.io/ReenaVerma1981/pen/qBdbbWJ

ul {
    list-style: none;
    padding: 0px;

}

.readme {
    background-color: transparent;
    color: #ff6600;
    font-family: "easyjet_rounded_demi",Arial,Helvetica,sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 22px;
    padding: 0;
    border: 0;
}

.accordion {
    margin: 0 auto;
    width: 100%;
}

.accordion__item {
    float: left;
    position: relative;
    width: 100%;
    background-color: transparent;
    border-radius: 4px;
    margin-bottom: 40px;
}

.accordion__item span {
    color: #ff6600;
    margin-top: 1rem;
    position: absolute;
    left: 280px;
    top: 0;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.accordion__item input[type=checkbox] {
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 50px;
    z-index: 1;
    opacity: 0;
}
.accordion__item input[type=checkbox]:checked ~ div.panel {
    float: left;
    margin: 5px 0;
    max-height: 0;
    opacity: 0;
    -webkit-transform: translate(0, 50%);
            transform: translate(0, 50%);
}

.accordion__item input[type=checkbox]:not(:checked) ~ span {
    padding-top: 5px;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}

.accordion__item input[type=checkbox]:checked ~ span {
    padding-top: 5px;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}

.panel {
    background-color: transparent;
    border: 1px solid grey;
}

<body>
    <div class="accordion">
        <ul class="">
            <li class="accordion__item">
                <input type="checkbox" checked="checked" />
                <p class="readme">Choose another   cool destination</p>           
                <span class="">
                    <svg viewBox="1 1 22 22" width="1em" height="1em" aria-hidden="true" focusable="false" class="icon-svg"><path d="M21.7 6.79a1 1 0 00-1.41 0L12 15.08 3.71 6.79a1 1 0 00-1.41 0 1 1 0 000 1.42l9 9a1 1 0 001.42 0l9-9a1 1 0 00-.02-1.42z"></path></svg>
                </span>
                <div class="panel">
                    <strong>
                        <a href="www.google.com">London</a>, 
                        <a href="www.google.com">NYC</a>, 
                        <a href="www.google.com">LA</a>, 
                        <a href="www.google.com">LAX</a>, 
                        <a href="www.google.com">Dublin</a>, 
                        <a href="www.google.com">Liverpool</a>,
                        <a href="www.google.com">Manchester</a>, 
                        <a href="www.google.com">Dubai</a>, 
                        <a href="www.google.com">Hong Kong</a>, 
                        <a href="www.google.com">Singapre</a>.
                    </strong>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

Answer 1

.accordion__item input[type=checkbox]:checked ~ div.panel {
    float: left;
    margin: 5px 0;
    max-height: 0;
    //opacity: 0; instead use display: none
    -webkit-transform: translate(0, 50%);
            transform: translate(0, 50%);
}

如果您认为答案正确，请标记已接受的答案

Answer 2

尝试使用 pointer-events

.accordion__item input[type="checkbox"]:checked ~ div.panel {
    float: left;
    margin: 5px 0;
    max-height: 0;
    opacity: 0;
    -webkit-transform: translate(0, 50%);
    transform: translate(0, 50%);
    pointer-events: none;
}

.panel {
    background-color: transparent;
    border: 1px solid grey;
    pointer-events: all;
}

CSS 只有带输入的手风琴 - 出现隐藏的超链接

CSS only accordian with input - hidden hyperlinks appearing

html

css

accordion

css-selectors