Question

当鼠标悬停在“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'这个问题，因为如果有解决方案，那就很受欢迎了。

修改

这实际上是我的代码，但不起作用

Answer 1

在开始编码之前，先看看jQueryUI Tooltip（http://jqueryui.com/tooltip/）。它以最少的编程要求完成您的工作。

来自doku：

可自定义，可主题化的工具提示，替换原生工具提示。

示例：

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

Answer 2

如果元素不相关，这将在用户悬停时保持弹出窗口处于活动状态，否则如果它是元素的子元素，它将不会失去焦点。

#popup:hover {
  display:block
}

Answer 3

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

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

Answer 4

如果你不想使用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;
}

Answer 5

相邻的兄弟选择器非常适用于此示例：

div {
    display: none;
}

a:hover + div {
    display: block;
}

演示：http://jsfiddle.net/G4hd9/

文章：http://css-tricks.com/child-and-sibling-selectors/

Answer 6

 #popup {
 display:none;
 }    
 a:hover + #popup {
   display:block;
 }

尝试这应该工作。 jsfiddle

如何显示弹出窗口

6 个答案: