以Mike Bostock的“移动专利诉讼”示例为例,我想在图例上创建鼠标悬停事件。我希望脚本能够正常工作,因为我是javascript新手
例如:
<div id="sample"><ul><li><div>text</div><div class="tooltip">tooltip contents</div></li></ul></div>
当我将鼠标悬停在div文本(文本)上时,应该显示工具提示内容。
下面是我的代码:请问有人建议如何做。
我的CSS:
.tooltip {
position:absolute;
display:none;
z-index:1000;
background-color:black;
color:white;
border: 1px solid black;
}
我的html:
<div id="sample"><ul><li><div>text</div><div class="tooltip">tooltip contents</div></li></ul></div>
最佳答案
<div id="sample">
<ul><li><div>text</div><div class="tooltip">tooltip contents</div></li></ul>
</div>
<style>
#sample ul li div:first-child:hover+.tooltip
{
display: block;
}
.tooltip {
position:absolute;
display:none;
z-index:1000;
background-color:black;
color:white;
border: 1px solid black;
}
</style>