Question

以Mike Bostock的Mobile Patent Suit为例，我想在图例上创建鼠标悬停事件。我希望脚本能够工作，因为我是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>

Answer 1

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

强制定向布局图例文本鼠标悬停

1 个答案: