无论元素在哪里，如何允许鼠标悬停事件？

Question

我正在尝试制作一个登录表单，我正在接受的输入之一是用户位置，我想在标签上使用标志符号，所以我最终制作了一个自定义下拉菜单，而不是使用内置的 HTML 选项标签.我得到了能够打开和关闭它以及选择选项的下拉菜单，但是，所有选项的包装 div 溢出了包含 div 的覆盖表单的边缘。我通过一些 Javascript 逻辑将元素显示在边缘上，将表单包装器的 overflow-y 属性设置为可见，并将 overflow-x 属性设置为剪辑。这非常适合显示下拉菜单，但是，我无法与包含 div 的表单边缘上方的任何对象进行交互，有没有办法允许鼠标/悬停/单击事件仍然能够对元素执行即使它们溢出底层父容器的边缘？

在最简单的形式中，代码有点像这样：

<!--HTML-->
`<div class="registerStep4" id="registerStep4">
                <!--...-->
                <div class="location">
                <div class="dropdown">
                  <input type="text" class="dropDownTextBox" placeholder="Select Country" readonly>
                  <div class="option">
                    <div onclick="show('United States')"><span class="fi fi-us"></span> United States</div>
                    <div onclick="show('United Kingdom')"><span class="fi fi-gb"></span> United Kingdom</div>
                    <div onclick="show('Afghanistan')"><span class="fi fi-af"></span> Afghanistan</option></div>
                    <div onclick="show('Albania')"><span class="fi fi-al"></span> Albania</div>
                    <div onclick="show('Algeria')"><span class="fi fi-dz"></span> Algeria</div>
                    <div onclick="show('Andorra')"><span class="fi fi-ad"></span> Andorra</option></div>
                    <div onclick="show('Angola')"><span class="fi fi-an"></span> Angola</div>
                    <div onclick="show('Antigua and Barbuda')"><span class="fi fi-ag"></span> Antigua and Barbuda</div>
                    <div onclick="show('Argentina')"><span class="fi fi-ar"></span> Argentina</option></div>
                  </div>
                </div>
                </div>`

/* CSS */
#registerStep4 {
    width: 360px;
    position: absolute;
    top: 0;
    transform: translateX(1000px);
    user-select: none;
    height: 330px;
}

.dropdown {
    width: 100%;
}

.dropdown input {
    width: 85%;
    padding: 10px 30px;
    cursor: pointer;
    display: block;
    margin: auto;
    background: rgb(25, 34, 58);
    border: 0;
    outline: none;
    border-radius: 30px;
    color: white;
    transition: 0.5s;
    font-size: 13px;
    box-shadow: none;
}

.dropdown input::placeholder {
    text-align: center;
    color: white;
}

.dropdown .option {
    position: absolute;
    width: 200px;
    text-align: left;
    margin-left: 50%;
    transform: translateX(-50%);
    background-color: rgb(69, 81, 114);
    height: 0px;
    transition: 0.25s;
    z-index: 1000;
    overflow-y: scroll;
    overflow-x: hidden;
}

.dropdown .option::-webkit-scrollbar {
    width: 4px;
}

.dropdown .option::-webkit-scrollbar-thumb {
    background: white;
    border-radius: 4px;
}

.dropdown.active .option {
    height: 180px;
}

.dropdown .option div {
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    color: white;
    font-size: 14px;
    /*pointer-events: visibleFill;????????*/
}

.dropdown .option div:hover {
    background: rgb(97, 110, 145);
}

.dropdown .option div span {
    position: relative;
    margin-left: 5px;
}

.dropdown::before {
    content: '';
    position: relative;
    display: inline-block;
    right: -120px;
    top: 30px;
    z-index: 1000;
    width: 8px;
    height: 8px;
    border-top: 2px solid white;
    border-right: 2px solid white;
    transform: rotate(-45deg);
    transition: 0.25s;
    pointer-events: none;
}

.dropdown.active::before {
    top: 25px;
    transform:rotate(135deg);
}

//Javascript
const dropdownSelect = document.querySelector('.dropdown');
const formWrapper = document.getElementById("formWrapper");
dropdownSelect.onclick = function() {
    dropdownSelect.classList.toggle('active');

    if(dropdownSelect.classList.contains('active')) {
        formWrapper.style.overflowY = "visible";
        formWrapper.style.overflowX = "clip";
    } else {
        formWrapper.style.overflowY = "hidden";
        formWrapper.style.overflowX = "hidden";
    }
}

在当前表单中，这可以显示下拉列表，单击它会下拉所有选项，并允许单击 registerStep4 div 范围内的所有选项 div