0

マウスが「a」要素の上にあるときにポップアップを表示しようとしています。

問題は、マウスがポップアップ要素の上にあるときにポップアップを保持したいのですが、マウスがその上にあるとポップアップが消えることです。

ポップアップは<a>要素のすぐ下 (ディスプレイ上) にあります。

これは私のコードです

HTML:

 <ul>
   <li>
    <a id="test">
      <div>
         Some text
      </div>

     <div id="popup">
        <ul>
          <li><a>text0</a>
          </li>
          <li><a>text1</a>
          </li>
        </ul>
      </div>
   </a>
  </li>
  <li> TEXT
  </li>
</ul>

CSS:

 #popup {
  display:none;
 }    

 #test:hover #popup {
   display:block;
 }

質問に「JAVASCRIPT / JQUERY」というタグを付けました。解決策があれば大歓迎です。

編集

これは実際には私のコードであり、機能しません

4

6 に答える 6

3

コーディングを始める前に、jQueryUI ツールチップ ( http://jqueryui.com/tooltip/ ) を見てください。最小限のプログラミング要件で、必要なことを実行します。

ドク より:

ネイティブのツールチップを置き換える、カスタマイズ可能でテーマ設定可能なツールチップ。

例：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Tooltip - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( document ).tooltip();
  });
  </script>
  <style>
  label {
    display: inline-block;
    width: 5em;
  }
  </style>
</head>
<body>

<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
<p>Hover the field to see the tooltip.</p>


</body>
</html>
于 2013-08-02T13:58:20.620 に答える
0

これにより、要素が関連していない場合、ユーザーがポップアップをホバリングしている間、ポップアップがアクティブなままになります。そうでない場合、要素の子である場合、フォーカスが失われません。

#popup:hover {
  display:block
}
于 2013-08-02T13:57:35.220 に答える
0 
 #popup {
 display:none;
 }    
 a:hover + #popup {
   display:block;
 }

これを試してみてください。 jsfiddle

于 2013-08-02T14:37:17.747 に答える