Закройте окно выбора опций при наведении на 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>