关闭 Div 悬停时的选择选项窗口

Question

需要快速帮助。我喜欢在将鼠标悬停在另一个 div 元素上时关闭选项下拉菜单。

因此，首先打开下拉菜单并将红色元素悬停在右侧，而将鼠标悬停在红色元素上时我想关闭下拉菜单。

提前致谢。

select {

  width: 200px;

  display: inline-block;

}

div {

  width: 50px;

  height: 50px;

  background: red;

  display: inline-block;

}

<select>

  <option>1</option>

  <option>2</option>

  <option>3</option>

  <option>4</option>

  <option>5</option>

</select>

<div></div>

Answer 1

在 div 悬停时，您可以简单地触发blur()选择元素上的事件，例如：使用mouseenter：let myDiv = document.getElementById("myDiv"); let mySelect = document.getElementById("mySelect"); myDiv.addEventListener("mouseenter", function( event ) {     mySelect.blur();}, false);select{width:200px;display:inline-block}#myDiv{width:50px;height:50px;background:red;display:inline-block}<select id="mySelect">  <option>1</option>  <option>2</option>  <option>3</option>  <option>4</option>  <option>5</option></select><div id="myDiv"></div>使用onmouseover：let myDiv = document.getElementById("myDiv");let mySelect = document.getElementById("mySelect");myDiv.onmouseover = function() {  mySelect.blur();};select{width:200px;display:inline-block}#myDiv{width:50px;height:50px;background:red;display:inline-block}<select id="mySelect">  <option>1</option>  <option>2</option>  <option>3</option>  <option>4</option>  <option>5</option></select><div id="myDiv"></div>使用 jQuery .hover()：$('#myDiv').hover(function() {  $('#mySelect').blur();});select{width:200px;display:inline-block}#myDiv{width:50px;height:50px;background:red;display:inline-block}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select id="mySelect">  <option>1</option>  <option>2</option>  <option>3</option>  <option>4</option>  <option>5</option></select><div id="myDiv"></div>