选择选项元素上的 onmouseout

Question

我有一个要求，我必须根据 mouseover 和 mouseout 事件显示替代元素。

默认元素是一个超链接（它会一直显示，除了onmouseover），alternate元素是一个下拉列表元素（它应该在超链接的鼠标悬停时显示。

我正在使用 javascript 来切换两个元素的显示（隐藏/取消隐藏）。

问题是鼠标的范围仅限于选择元素而不是它的选项值，即当我尝试使用鼠标从 DDL 中选择选项值时，浏览器认为它是 mouseout 并切换元素。我想要即使我在下拉列表选项元素上运行鼠标时也不应该发生鼠标移出。有没有办法解决这个问题？

这是我到目前为止所写的。

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>

Answer 1

这行得通：

• 将下拉列表包装在另一个 div 中。这个div 应该有mouseout，而不是选择
• 在 select 上的 mouseout 中添加一个 cancelbubble / stopPropogation，以防止 select 在打开时消失。
• 将 onchanged 处理程序添加到选择项以在选择项目时关闭下拉菜单。

jsFiddle Here

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

Answer 2

您可以为mouseout 事件创建处理程序并检查目标元素（event.target 或event.srcElement 用于IE）。如果不是列表元素，则调用hideDDl。

Answer 3

我想你正在寻找这个。试试看

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