显示工具提示，动态

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; 
}

如何使用锂的悬停事件来设置DIV财产（不包括JS）？喜欢的东西：

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

来源

2011-05-23 demas

你非常接近。你的最终选择者只是有点困惑。

http://jsbin.com/oholo5/

来源

2011-05-23 11:14:31 amustill

-2

您可以使用jQuery显示工具提示JQuery Tool Tip其使用方便

来源

2011-05-23 11:13:08 vkrams

**（不含JS）** – stecb 2011-05-23 11:19:45

li:hover .tooltip{ display: block; }

来源

2011-05-23 11:15:06

显示工具提示，动态

回答

相关问题