链接不可点击的轮播，而是点击上一个链接

Question

<style>
html, body {
    margin: 0px;
    padding: 0px;
}

.carousel_lb {
    position: relative;
    margin-top: 26px;
}

.carousel_lb-inner {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.carousel_lb-open:checked + .carousel_lb-item {
    position: static;
    opacity: 100;
}

.carousel_lb-item {
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
    display: flex;
    justify-content: space-between;
}

.carousel_lb-item img {
    display: block;
    height: auto;
    max-width: 100%;
}

.carousel_lb-control {
    border-radius: 50%;
    color: #242627;
    cursor: pointer;
    display: none;
    font-size: 40px;
    height: 40px;
    line-height: 35px;
    position: fixed;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    cursor: pointer;
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-align: center;
    width: 40px;
    z-index: 10;
}

.carousel_lb-control.prev {
    left: -50px;
}

.carousel_lb-control.next {
    right: -50px;
}

.carousel_lb-control:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #aaaaaa;
}

#carousel_lb-1:checked ~ .control-1,
#carousel_lb-2:checked ~ .control-2,
#carousel_lb-3:checked ~ .control-3,
#carousel_lb-4:checked ~ .control-4,
#carousel_lb-5:checked ~ .control-5,
#carousel_lb-6:checked ~ .control-6,
#carousel_lb-7:checked ~ .control-7,
#carousel_lb-8:checked ~ .control-8,
#carousel_lb-9:checked ~ .control-9,
#carousel_lb-10:checked ~ .control-10 {
    display: block;
}

.carousel_lb-indicators {
    list-style: none;
    margin: 0;
    padding: 0;
    bottom: -50px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
}

.carousel_lb-indicators li {
    display: inline-block;
    margin: 0 5px;
}

.carousel_lb-bullet {
    color: #fbd4ca;
    cursor: pointer;
    display: block;
    font-size: 35px;
}

.carousel_lb-bullet:hover {
    color: #aaaaaa;
}

#carousel_lb-1:checked ~ .control-1 ~ .carousel_lb-indicators li:nth-child(1) .carousel_lb-bullet,
#carousel_lb-2:checked ~ .control-2 ~ .carousel_lb-indicators li:nth-child(2) .carousel_lb-bullet,
#carousel_lb-3:checked ~ .control-3 ~ .carousel_lb-indicators li:nth-child(3) .carousel_lb-bullet,
#carousel_lb-4:checked ~ .control-4 ~ .carousel_lb-indicators li:nth-child(4) .carousel_lb-bullet,
#carousel_lb-5:checked ~ .control-5 ~ .carousel_lb-indicators li:nth-child(5) .carousel_lb-bullet,
#carousel_lb-6:checked ~ .control-6 ~ .carousel_lb-indicators li:nth-child(6) .carousel_lb-bullet,
#carousel_lb-7:checked ~ .control-7 ~ .carousel_lb-indicators li:nth-child(7) .carousel_lb-bullet,
#carousel_lb-8:checked ~ .control-8 ~ .carousel_lb-indicators li:nth-child(8) .carousel_lb-bullet,
#carousel_lb-9:checked ~ .control-9 ~ .carousel_lb-indicators li:nth-child(9) .carousel_lb-bullet,
#carousel_lb-10:checked ~ .control-10 ~ .carousel_lb-indicators li:nth-child(10) .carousel_lb-bullet {
    color: #428bca;
}

#title {
    width: 100%;
    position: absolute;
    padding: 0px;
    margin: 0px auto;
    text-align: center;
    font-size: 27px;
    color: rgba(255, 255, 255, 1);
    font-family: 'Open Sans', sans-serif;
    z-index: 9999;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}

@media (max-width: 420px) {
    .only-desktop {
        display: none !important;
    }
    #lastcomments {
        margin: auto !important;
    }
    .carousel_lb-control.prev {
        left: 5px;
    }
    .carousel_lb-control.next {
        right: 5px;
    }

}

</style>
<div class="carousel_lb">
    <div class="carousel_lb-inner">
        <input class="carousel_lb-open" type="radio" id="carousel_lb-1" name="carousel_lb" aria-hidden="true" hidden="" checked="checked">
        <div class="carousel_lb-item">
            <a href="...">Link1</a>
        </div>
        <input class="carousel_lb-open" type="radio" id="carousel_lb-2" name="carousel_lb" aria-hidden="true" hidden="">
        <div class="carousel_lb-item">
            <a href="...">Link2</a>
        </div>
        <input class="carousel_lb-open" type="radio" id="carousel_lb-3" name="carousel_lb" aria-hidden="true" hidden="">
        <div class="carousel_lb-item">
            <a href="...">Link3</a>
        </div>
        <input class="carousel_lb-open" type="radio" id="carousel_lb-4" name="carousel_lb" aria-hidden="true" hidden="">
        <div class="carousel_lb-item">
            <a href="...">Link4</a>
        </div>
        <input class="carousel_lb-open" type="radio" id="carousel_lb-5" name="carousel_lb" aria-hidden="true" hidden="">
        <div class="carousel_lb-item">
            <a href="...">Link5</a>
        </div>
        <input class="carousel_lb-open" type="radio" id="carousel_lb-6" name="carousel_lb" aria-hidden="true" hidden="">
        <div class="carousel_lb-item">
            <a href="...">Link6</a>
        </div>
        <input class="carousel_lb-open" type="radio" id="carousel_lb-7" name="carousel_lb" aria-hidden="true" hidden="">
        <div class="carousel_lb-item">
            <a href="...">Link7</a>
        </div>
        <input class="carousel_lb-open" type="radio" id="carousel_lb-8" name="carousel_lb" aria-hidden="true" hidden="">
        <div class="carousel_lb-item">
            <a href="...">Link8</a>
        </div>
        <input class="carousel_lb-open" type="radio" id="carousel_lb-9" name="carousel_lb" aria-hidden="true" hidden="">
        <div class="carousel_lb-item">
            <a href="...">Link9</a>
        </div>
        <input class="carousel_lb-open" type="radio" id="carousel_lb-10" name="carousel_lb" aria-hidden="true" hidden="">
        <div class="carousel_lb-item">
            <a href="...">Link10</a>
        </div>
        <label for="carousel_lb-10" class="carousel_lb-control prev control-1">‹</label>
        <label for="carousel_lb-2" class="carousel_lb-control next control-1">›</label>
        <label for="carousel_lb-1" class="carousel_lb-control prev control-2">‹</label>
        <label for="carousel_lb-3" class="carousel_lb-control next control-2">›</label>
        <label for="carousel_lb-2" class="carousel_lb-control prev control-3">‹</label>
        <label for="carousel_lb-4" class="carousel_lb-control next control-3">›</label>
        <label for="carousel_lb-3" class="carousel_lb-control prev control-4">‹</label>
        <label for="carousel_lb-5" class="carousel_lb-control next control-4">›</label>
        <label for="carousel_lb-4" class="carousel_lb-control prev control-5">‹</label>
        <label for="carousel_lb-6" class="carousel_lb-control next control-5">›</label>
        <label for="carousel_lb-5" class="carousel_lb-control prev control-6">‹</label>
        <label for="carousel_lb-7" class="carousel_lb-control next control-6">›</label>
        <label for="carousel_lb-6" class="carousel_lb-control prev control-7">‹</label>
        <label for="carousel_lb-8" class="carousel_lb-control next control-7">›</label>
        <label for="carousel_lb-7" class="carousel_lb-control prev control-8">‹</label>
        <label for="carousel_lb-9" class="carousel_lb-control next control-8">›</label>
        <label for="carousel_lb-8" class="carousel_lb-control prev control-9">‹</label>
        <label for="carousel_lb-10" class="carousel_lb-control next control-9">›</label>
        <label for="carousel_lb-9" class="carousel_lb-control prev control-10">‹</label>
        <label for="carousel_lb-1" class="carousel_lb-control next control-10">›</label>
        <ol class="carousel_lb-indicators">
            <li>
                <label for="carousel_lb-1" class="carousel_lb-bullet">•</label>
            </li>
            <li>
                <label for="carousel_lb-2" class="carousel_lb-bullet">•</label>
            </li>
            <li>
                <label for="carousel_lb-3" class="carousel_lb-bullet">•</label>
            </li>
            <li>
                <label for="carousel_lb-4" class="carousel_lb-bullet">•</label>
            </li>
            <li>
                <label for="carousel_lb-5" class="carousel_lb-bullet">•</label>
            </li>
            <li>
                <label for="carousel_lb-6" class="carousel_lb-bullet">•</label>
            </li>
            <li>
                <label for="carousel_lb-7" class="carousel_lb-bullet">•</label>
            </li>
            <li>
                <label for="carousel_lb-8" class="carousel_lb-bullet">•</label>
            </li>
            <li>
                <label for="carousel_lb-9" class="carousel_lb-bullet">•</label>
            </li>
            <li>
                <label for="carousel_lb-10" class="carousel_lb-bullet">•</label>
            </li>
        </ol>
    </div>
</div>

使用此代码，我试图通过背景图片和链接（在.carousel_lb-item内部）显示一些元素。轮播中的第一个元素运行良好，其他元素似乎正常，但它们的链接不可单击，实际上，前一个元素的链接位于顶部。例如，当我单击Link2时，它实际上单击了Link1，当我尝试单击Link5时，它单击了Link4，依此类推。我猜显示器和不透明度存在问题，但无法使其正常工作。感谢您的帮助！