javascript - CSS 错误行为？on :hover 使用 ~

Question

我创建了一个自定义下拉列表，当我将鼠标悬停在 p 标签（标题）和第一个标签（选项）上时，我得到了预期的行为，但是当我尝试将光标移动到下一个标签时，整个部分都会关闭；为什么不保持悬停？（如果我将鼠标非常缓慢地逐个像素地移动，我会得到预期的行为）

Javascript、CSS 和 HTML

const ddlContainers = document.getElementsByClassName('ddlContainer');
for (let ddlContainer of ddlContainers) {
    const ddlButton = ddlContainer.children[1];//ddlContainer.getElementsByTagName('button')[0];
    //const ddlSelect = ddlContainer.children[2]; //ddlContainer.getElementsByTagName('div')[0];
    const ddlOptions = ddlContainer.children[2].getElementsByTagName('label'); //ddlSelect.getElementsByTagName('label'); // document.querySelectorAll("#test > label");
    const selectLabel = ddlButton.children[0];

    ddlButton.addEventListener('click', function (e) {
        e.preventDefault();
        e.target.nextElementSibling.classList.toggle('ddlHidden');
    })

    function toggleHidden(e) {
        e.target.parentNode.classList.toggle('ddlHidden');
    }

    for (let option of ddlOptions) {
        option.addEventListener('click', function (e) {
            setSelectTitle(e);
        })
    }

    function setSelectTitle(e) {
        selectLabel.innerText = e.target.innerText
        toggleHidden(e);
    }
}

.ddlContainer {
    position: relative;
    width: 100%;
    font-size: 1em;
}
.ddlButton {
    display: flex;
    justify-content: space-between;
    padding: 0.3em 0.6em 0.3em 0.8em;
    width: 100%;
    background: #fff;
}
.arrow {
    border: solid black; 
    font-size: 0.9em;
    border-width: 0 2px 2px 0;
    padding: 0.2em;
    margin: 0 0.2em;
    height: 0;
    width: 0;
    align-self: center;
    transform: rotate(45deg)
}
.ddl {
    position: absolute;
    z-index: 1;
    display: flex;
    width: 100%;
    flex-direction: column;
    border: 2px solid #00000088;
    background: #eee;
}
.ddl input[type="radio"] {
    display: none;
}
.ddl > * {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0.4em 1em;
    z-index: 2;
}
.ddl > label{
    font-size: 0.9em;
    background: #fff;
    cursor: pointer;
    /*Hides the label*/
    height: 0;
    padding: 0;
    visibility: hidden;
    transition: color 0.1s ease, padding ease 0.1s;
    color: #ffffffff;
}

.ddl > p:hover ~ label { /* Displays all labels */
    height: auto;
    padding: 0.5em 1.5em;
    color: #000000;
    visibility: visible;
}
.ddl > p:hover ~ p ~ label { /* Removes the display for all the following sets of labels */
    height: 0;
    padding: 0;
    color: #ffffffff;
    visibility: hidden;
}

.ddl > label:hover ~ label { /* Kepps display for all following labels */
    height: auto;
    padding: 0.5em 1.5em;
    color: #000000;
    visibility: visible;
}
.ddl > label:hover ~ p ~ label { /* Removes display for all the following sets of labels */
    height: 0;
    padding: 0;
    color: #ffffffff;
    visibility: hidden;
}
.ddl > label:hover { /* Keeps display of current label when leaving p-tag */
    height: auto;
    padding: 0.5em 1.5em;
    color: #000000;
    visibility: visible;
}
.ddl > label:hover{
    background: #d3d9f0;
}

.ddlHidden {
    display: none;
}

<div id="test1" class="ddlContainer form-group">
    <label for="test1Btn">Option list 1:</label>
    <button id="test1Btn" class="ddlButton">
        <span>- Chose Option -</span>
        <span class="arrow"></span>
    </button>
    <div class="ddl ddlHidden">
        <p>Item type 1<span class="arrow"></span></p>
        <label for="test1-0">Item 1.1</label>
        <input id="test1-0" value="42" type="radio" name="testOvelse1opt" />
        <label for="test1-1">Item 1.2</label>
        <input id="test1-1" value="16" type="radio" name="testOvelse1opt" />
        <label for="test1-2">Item 1.3</label>
        <input id="test1-2" value="17" type="radio" name="testOvelse1opt" />
        <label for="test1-3">Item 1.3</label>
        <input id="test1-3" value="2" type="radio" name="testOvelse1opt" />

        <p>Item type 2<span class="arrow"></span></p>
        <label for="test1-4">Item 2.1</label>
        <input id="test1-4" value="42" type="radio" name="testOvelse1opt" />
        <label for="test1-5">Item 2.2</label>
        <input id="test1-5" value="16" type="radio" name="testOvelse1opt" />

        <p>Item type 3<span class="arrow"></span></p>
        <label for="test1-6">Item 3.1</label>
        <input id="test1-6" value="42" type="radio" name="testOvelse1opt" />
        <label for="test1-7">Item 3.2</label>
        <input id="test1-7" value="16" type="radio" name="testOvelse1opt" />
        <label for="test1-8">Item 3.3</label>
        <input id="test1-8" value="17" type="radio" name="testOvelse1opt" />
    </div>
</div>
<br />
<div id="test2" class="ddlContainer form-group">
    <label for="test2Btn2">Option list 2:</label>
    <button id="test2Btn2" class="ddlButton">
        <span>- Chose Option -</span>
        <span class="arrow"></span>
    </button>
    <div class="ddl ddlHidden">
        <p>Item type 1<span class="arrow"></span></p>
        <label for="test2-0">Item 1.1</label>
        <input id="test2-0" value="42" type="radio" name="testOvelse1opt" />
        <label for="test2-1">Item 1.2</label>
        <input id="test2-1" value="16" type="radio" name="testOvelse1opt" />
        <label for="test2-2">Item 1.3</label>
        <input id="test2-2" value="17" type="radio" name="testOvelse1opt" />
        <label for="test2-3">Item 1.3</label>
        <input id="test2-3" value="2" type="radio" name="testOvelse1opt" />

        <p>Item type 2<span class="arrow"></span></p>
        <label for="test2-4">Item 2.1</label>
        <input id="test2-4" value="42" type="radio" name="testOvelse1opt" />
        <label for="test2-5">Item 2.2</label>
        <input id="test2-5" value="16" type="radio" name="testOvelse1opt" />

        <p>Item type 3<span class="arrow"></span></p>
        <label for="test2-6">Item 3.1</label>
        <input id="test2-6" value="42" type="radio" name="testOvelse1opt" />
        <label for="test2-7">Item 3.2</label>
        <input id="test2-7" value="16" type="radio" name="testOvelse1opt" />
        <label for="test2-8">Item 3.3</label>
        <input id="test2-8" value="17" type="radio" name="testOvelse1opt" />
    </div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />

注意：当我使用 RazorEngine 生成 HTML 时，更改 HTML 布局会很困难。

标签： javascripthtmlcss