Question

我有一个要求，我必须根据鼠标悬停和鼠标移除事件显示备用元素。

默认元素是一个超链接（除了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

<!--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上添加一个cancelbubble / stopPropogation到mouseout，以防止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>

onmouseout on select option element

3 个答案: