Close the select option window on Div hover

Question

Need a quick help. I like to close the option drop down when you hover the other div element.

So first open the drop down and hover the red element on right side, while hover over red element i want to close the drop down.

Thanks in advance.

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>

Does this answer your question? [Close a SELECT dropdown list programmatically with Javascript/jQuery](https://stackoverflow.com/questions/10851882/close-a-select-dropdown-list-programmatically-with-javascript-jquery) — Anurag Srivastava, Apr 10 '20 at 14:13

palaѕн · Accepted Answer · 2020-04-10T14:27:08.193

On div hover, you can simply trigger blur() event on the select element like:

Using 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>

Using 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>

Using 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>

I'm on Chromium Linux, the mousenter doesn't work on your fiddle ...., but well on firefox — BENARD Patrick, Apr 10 '20 at 14:14
@BENARDPatrick: Try once using `onmouseover` I have added a demo for it. — palaѕн, Apr 10 '20 at 14:21
I think it's an issue on Chromium Linux, none of the fiddle works, I tried too on Chrome, not works... But as I said works fine on Firefox. I don't know why... Your answer is the good I know. Just to say : Chrome with Ubuntu with Kde Flavour, not works... — BENARD Patrick, Apr 11 '20 at 11:26

Close the select option window on Div hover

1 Answers1