選擇選項元素上的onmouseout

我有一個要求，我必須根據mouseover和mouseout事件來顯示替代元素。選擇選項元素上的onmouseout

默認元件是（將被顯示的所有時間，除了在的onmouseover）的超鏈接和替代元件是下拉列表元素（應當顯示在超鏈接的鼠標懸停。

我使用JavaScript來切換兩個元素的顯示（隱藏/取消隱藏）

問題是鼠標的範圍僅限於select元素而不是其選項值，即當我嘗試使用鼠標從DDL中選擇選項值時瀏覽器認爲它是鼠標和它切換元素。我希望即使在我的鼠標在下拉列表選項元素上運行時也不會發生鼠標移動。無論如何要修復是什麼？

這是我寫到目前爲止。

JS代碼

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

來源

2012-10-26 user1697113

如果你要操作DOM對象，爲什麼不使用jQuery？你只需要3行;） –

這工作：

裹下拉在另一個DIV。這div應該有mouseout，而不是選擇
在select上向mouseout添加一個cancelbubble/stopPropogation，以防止select在打開時消失。
向select中添加一個更改的處理程序，以在選擇某個項目時關閉下拉列表。

jsFiddle Here

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

來源

2012-10-26 06:37:24 StuartLC

謝謝，這解決了我的目的，好戲伎倆:) – user1697113

您可以爲mouseout事件的處理程序和檢查目標元素（event.target或event.srcElement用於IE）。如果它不是列表元素，請致電hideDDl。

來源

2012-10-26 05:53:08

我認爲你正在尋找這個。試試吧

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

來源

2012-10-26 06:13:06 polin

感謝您的答案，但我仍然無法保存select元素的選項列表，只要我將鼠標移動到列表中隱藏或將其樣式更改爲隱藏。 :(。我試着用jquery – user1697113

一個更好的方法是讓選擇選項默認禁用。當你將鼠標懸停在鏈接上時，選擇選項將被啓用。並且選擇一個選項它將再次顯示鏈接 – polin

選擇選項元素上的onmouseout

回答

相關問題