Question

我为我正在制作的元素周期表制作了一个工具提示，但仍然无法弄清楚如何调整它，所以你将鼠标悬停在某个特定的表上并显示在另一侧。

a.tooltip
{
    outline:none; 
}
a.tooltip strong 
{
    line-height:30px;
}
a.tooltip:hover 
{
    text-decoration:none;
} 
a.tooltip span 
{
    display:none;
    line-height:16px;
    margin-left:26px;
    margin-top:-30px;
    padding:14px 20px;
    width:450px; 
    z-index:10;
}
a.tooltip:hover span
{ 
    background:#218C24; 
    border:1px solid #000000;
    color:#111;
    display: inline;
    position: absolute;
}
    /*CSS3 extras*/
a.tooltip span
{
    border-radius:4px;
    box-shadow: 5px 5px 8px #707062;
}

这是实际的CSS部分，我只需要在某个帖子后右侧的位置。我该如何解决？除了CSS之外，我还会把它保留在其中。

继承人 JSfiddle
或者用于全屏视图 here

请帮助
一如既往地感谢您的时间。

Answer 1

我已经提出了以下CSS，它可以帮助您实现您想要做的事情。它是不同psuedo-selector的组合，它成功地将工具提示的位置更改为包含第9组后的元素周期表中任何元素的右侧。好的是你的HTML结构保持不变。

tr:nth-child(2) td:nth-child(4) a div span, tr:nth-child(3) td:nth-child(n+4) a div span, tr:nth-child(4) td:nth-child(n+4) a div span, tr:nth-child(5) td:nth-child(n+10) a div span, tr:nth-child(6) td:nth-child(n+10) a div span, tr:nth-child(7) td:nth-child(n+10) a div span, tr:nth-child(8) td:nth-child(n+10) a div span {
     margin-left: -515px;
}

这是指向工作jsFiddle demo的链接。

CSS工具提示定位在一定区域之后

1 个答案: