CODEWITHSUNDEEP
javascripthtmlhtml-select
user1697113
user1697113

Reputation: 700

onmouseout on select option element

I have a requirement in which i have to display alternate elements depending upon mouseover and mouseout events.

Default element is a hyperlink( it will be displayed all times except at onmouseover) and the alternate element is a Drop down list element(it should be displayed on mouseover of the hyperlink.

I am using javascript to toggle the display(hide/unhide) of the two elements.

The problem is the scope of mouse is limited to the select element only and not its options values i.e when i try to select the option values from the DDL using mouse the browser thinks it as mouseout and it toggles the element.I want that mouseout should not happen even when im running my mouse over the drop down list option elements.Is there anyway to fix this?

Here is what i have written so far.

JS code

function showDDl()
{
  document.getElementById("LINK").style.display='none';
  document.getElementById("ddlLanguage").style.display='';
}
function hideDDl()
{
  document.getElementById("ddlLanguage").style.display='none';
  document.getElementById("LINK").style.display='';
}

HTML CODE

<!--CODE FOR Hyperlink.. this is to be displayed at all times except at mouseover -->
<div id="LINK">
<a href='#' onmouseover="showDDl()" >
(Change Language)
</a>
</div>

<!--CODE FOR SELECT ELEMENT dispalyed at mouseover -->

<select style="display: none;" id="ddlLanguage" name="ddlLanguage" onmouseout="hideDDl()">
  <option value="en"><bean:message key="common.lang.english"/></option>
  <option value="fr"><bean:message key="common.lang.francais"/></option>
  <option value="de"><bean:message key="common.lang.deutsch"/></option>
  <option value="it"><bean:message key="common.lang.italiano"/></option>
  <option value="es"><bean:message key="common.lang.espanol"/></option>
  <option value="nl"><bean:message key="common.lang.nederlands"/></option>
</select>

Upvotes: 2

Views: 4796

Answers (3)

StuartLC
StuartLC

Reputation: 107247

This works:

  • Wrap the Dropdown in another div. This div should have the mouseout, not the select
  • Add a cancelbubble / stopPropogation to the mouseout on the select, to prevent the select from disappearing when it is open.
  • Add an onchanged handler to the select to close the drop down when an item is selected.

jsFiddle Here

<div id="DROPDOWN"  onmouseout="hideDDl()">
    <select style="display: none;" 
            id="ddlLanguage" 
            name="ddlLanguage" 
            onmouseout="cancelBubble();" 
            onchange="hideDDl();">
        <option value="en">
       ....

Upvotes: 1

polin
polin

Reputation: 2835

I think you are looking out for this. Try it

    <script type="text/javascript">
 function showDDl()
 {
    // alert("p");
   document.getElementById("LINK").style.visibility="hidden";
   document.getElementById("ddlLanguage").style.visibility="visible";

 }
 function hideDDl()
 {
   document.getElementById("ddlLanguage").style.visibility="hidden";
     document.getElementById("LINK").style.visibility="visible";
 }
</script>

HTML CODE

<!--CODE FOR Hyperlink.. this is to be displayed at all times except at mouseover -->

<a href='#' onMouseOver="showDDl()" id="LINK" >
(Change Language)
</a>
<br/>

<!--CODE FOR SELECT ELEMENT dispalyed at mouseover -->

<select style="visibility:hidden" id="ddlLanguage" name="ddlLanguage" onmouseout="hideDDl()">
  <option value="en"><bean:message key="common.lang.english"/></option>
  <option value="fr"><bean:message key="common.lang.francais"/></option>
  <option value="de"><bean:message key="common.lang.deutsch"/></option>
  <option value="it"><bean:message key="common.lang.italiano"/></option>
  <option value="es"><bean:message key="common.lang.espanol"/></option>
  <option value="nl"><bean:message key="common.lang.nederlands"/></option>
</select>

Upvotes: 0

Emin A. Alekperov
Emin A. Alekperov

Reputation: 1067

You can make a handler for a mouseout event and check a target element (event.target or event.srcElement for IE). If it isn't a list element then call hideDDl.

Upvotes: 0

Related Questions