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

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";
}
}

在当前的表单中，这是用来显示下拉菜单的，点击它会下拉所有的选项，并允许点击所有在registerStep4div

范围内的选项div

Answer 1

我不得不对你的代码做一些改变来复制这个问题。我在你的HTML中删除了一些流浪的<option>和<div>标签，将JS中的#formWrapper更改为#registerStep4(正如我假设你打算的那样)，并将#registerStep4元素的高度调整为100px，以实际使下拉框溢出。这样，我就不能像你描述的那样与#registerStep4边缘以外的下拉框进行交互。

我不认为这种行为是规范的。最有可能的是，这是Chrome的问题，因为我无法在Firefox中复制这种行为。这个问题似乎是由#registerStep4上的transform: translateX(1000px)属性引起的。如果您删除该属性，问题将自行解决。

我不太了解你的情况，但我建议你有两个选择:

1. 你真的需要把#registerStep4的内容隐藏在x里吗?如果你删除#registerStep4上的所有溢出属性，下拉菜单应该像预期的那样工作。
2. 如果你真的需要内容隐藏在x中，你真的需要div被翻译1000px吗?如果有，一定要有变换吗?由于#registerStep4已经完全定位，您可以使用left: 1000px;属性来实现相同的结果。

下面是使用left: 1000px;而不是转换的剪辑。结果是一样的，但问题解决了(至少我解决了)。我不能提供更多的帮助，但我希望这是有用的。

const dropdownSelect = document.querySelector('.dropdown');
const formWrapper = document.getElementById("registerStep4");
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 {
width: 360px;
position: absolute;
top: 0;
left: 1000px;
user-select: none;
height: 100px;
}
.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);
}

<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</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</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</div>
</div>
</div>
</div>
</div>