2

マウスオーバーとマウスアウトのイベントに応じて代替要素を表示する必要があるという要件があります。

デフォルト要素はハイパーリンク (onmouseover 以外では常に表示されます) で、代替要素はドロップダウン リスト要素 (ハイパーリンクのマウスオーバーで表示される必要があります) です。

2 つの要素の表示 (非表示/非表示) を切り替えるために 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>
4

3 に答える 3

1

これは機能します：

  • ドロップダウンを別の div でラップします。これには、 select ではなく がdiv必要ですmouseout
  • 選択のマウスアウトに cancelbubble / stopPropogation を追加して、開いているときに選択が消えないようにします。
  • onchanged ハンドラーを select に追加して、項目が選択されたときにドロップダウンを閉じます。

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

あなたはこれを探していると思います。それを試してみてください

    <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 に答える
0

イベントのハンドラーを作成し、ターゲット要素 (またはIE)mouseoutをチェックできます。リスト要素でない場合は、 を呼び出します。event.targetevent.srcElementhideDDl

于 2012-10-26T05:53:08.030 に答える