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

如果您真的想制作一个漂亮的弹出窗口，请使用：

http://getbootstrap.com/2.3.2/javascript.html#popovers

于 2013-08-02T14:00:56.453 回答
0

如果你不想使用 jQuery，你可以让 div 成为 a 标签的子元素，并使用一些 css 技巧来使它全部工作（http://jsfiddle.net/TMBGm/）：

<a>some text<div>popup text</div></a>


a {
    position: relative;
}
a div {
    display: none;
}
a:hover div {
    display: block;
    position: absolute;
}
于 2013-08-02T14:01:59.727 回答
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 回答
0

The adjacent sibling selector is perfect for this example:

div {
    display: none;
}

a:hover + div {
    display: block;
}

Demo: http://jsfiddle.net/G4hd9/

Article: http://css-tricks.com/child-and-sibling-selectors/

于 2013-08-02T14:11:05.600 回答