Hide the selection box when hovering over the Div

Question

Hide the selection box when hovering over the Div

Looking for a quick solution. I want the option drop down to close when another div element is hovered over.

First, open the drop down and hover over the red element on the right side. When hovering over the red element, I would like the drop down to close.

Thank you 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>

javascript jquery html css

Answer 1

Answer №1

When the div is hovered over, you can easily trigger the blur() event on the select element like this:

Using mouseenter:

let containerDiv = document.getElementById("containerDiv"); 
let selection = document.getElementById("selection"); 
containerDiv.addEventListener("mouseenter", function( event ) {   
  selection.blur();
}, false);

select{width:200px;display:inline-block}
#containerDiv{width:50px;height:50px;background:red;display:inline-block}

<select id="selection">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<div id="containerDiv"></div>

Using onmouseover:

let containerDiv = document.getElementById("containerDiv");
let selection = document.getElementById("selection");
containerDiv.onmouseover = function() {
  selection.blur();
};

select{width:200px;display:inline-block}
#containerDiv{width:50px;height:50px;background:red;display:inline-block}

<select id="selection">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<div id="containerDiv"></div>

Using jQuery .hover():

$('#containerDiv').hover(function() {
  $('#selection').blur();
});

select{width:200px;display:inline-block}
#containerDiv{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="selection">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<div id="containerDiv"></div>

Answer 2

When the div is hovered over, you can easily trigger the blur() event on the select element like this:

Using mouseenter:

let containerDiv = document.getElementById("containerDiv"); 
let selection = document.getElementById("selection"); 
containerDiv.addEventListener("mouseenter", function( event ) {   
  selection.blur();
}, false);

select{width:200px;display:inline-block}
#containerDiv{width:50px;height:50px;background:red;display:inline-block}

<select id="selection">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<div id="containerDiv"></div>

Using onmouseover:

let containerDiv = document.getElementById("containerDiv");
let selection = document.getElementById("selection");
containerDiv.onmouseover = function() {
  selection.blur();
};

select{width:200px;display:inline-block}
#containerDiv{width:50px;height:50px;background:red;display:inline-block}

<select id="selection">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<div id="containerDiv"></div>

Using jQuery .hover():

$('#containerDiv').hover(function() {
  $('#selection').blur();
});

select{width:200px;display:inline-block}
#containerDiv{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="selection">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<div id="containerDiv"></div>

Hide the selection box when hovering over the Div

Answer №1

Similar questions

How can I transform this in JavaScript so that it returns a Promise?

Having trouble getting the hover effect to work when selecting a different section of the SVG

Looking to find top-notch keywords that stand out from the rest?

Consider utilizing divs in a similar manner to tables

Unable to set height of images using jQuery following an ajax request

Steps to incorporate a session into an HTML login form

The MySQL database will need to contain an HTML form with specific styling attributes

Dealing with multiple v-on:click events in Vue.js

Navigating between two Vue2 applications

Parsing XML using jQuery AJAX without the need for the find method

Integrate payment form in Ajax with square pos card option

Issue: Importing an ES Module in React-gauge-chart causing error in NextJs

Troubleshooting Div Element Width in CSS Not Functioning

What is the reason for having two plugin declarations within the galleriffic.js file?

What is the process for importing module functions in Svelte when utilizing npm?

Response from a Clean jQuery Web Service

The reliability of jQuery posting varies

Producing identical sets of 2 random hues for a pair of distinct items

Is there a way to create an HTML select element where each option has a unique background color, and will display properly

"Exploring the relationship between Javascript objects and the '