2

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

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

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

问题是鼠标的范围仅限于选择元素而不是它的选项值，即当我尝试使用鼠标从 DDL 中选择选项值时，浏览器认为它是 mouseout 并切换元素。我希望 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='';
}

代码

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

3 回答 3

1

这有效：

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

jsFiddle在这里

<div id="DROPDOWN"  onmouseout="hideDDl()">
    <select style="display: none;" 
            id="ddlLanguage" 
            name="ddlLanguage" 
            onmouseout="cancelBubble();" 
            onchange="hideDDl();">
        <option value="en">
       ....
于 2012-10-26T06:37:24.060 回答
0

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

于 2012-10-26T05:53:08.030 回答
0

我想你正在寻找这个。尝试一下

    <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-26T06:13:06.253 回答