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 的悬停事件设置 div 属性(没有 js)？像这样的东西:
li:hover -> div.tooltip { display : block; }
li:focus -> div.tooltip { display : block; }
最佳答案
你非常接近。您的最终选择器有点困惑。
关于html - 动态显示工具提示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6096346/