Question

HTML：

<html>
<head>
  <title>Tooltips</title>
  <link rel="stylesheet" type="text/css" href="tooltips.css" />
</head>
<body>
  <ul>
    <li tabindex="1">
      <span class="name">Capacity: 1.5 </span>
      <div class="tooltip">
    <p><strong>Some text</strong></p>
    <p>Some long long long  long long long  long long long  long long long  long long long  text</p>
      </div>
    </li>
  </ul>
</body>
</html>

的CSS：

li { position : relative; }

div.tooltip {
    display: none;
    position: absolute;
    top: 8px;
    left: 120px;
    width: 24em;
    z-index: 1;
    border: 1px solid gray;
    background: #fffdc3 top left repeat-x; 
}

如何使用li的hover-event设置div属性（不使用js）？类似的东西：

li:hover -> div.tooltip { display : block; }
li:focus -> div.tooltip { display : block; }

Answer 1

你非常接近。你的最终选择器有点困惑。

http://jsbin.com/oholo5/

Answer 2

li:hover .tooltip{ display: block; }

Answer 3

您可以使用jquery显示工具提示JQuery Tool Tip它易于使用

动态显示工具提示

3 个答案: