在 HTML/CSS 的悬停状态的工具提示中包含链接

问题描述

我正在创建一个带有悬停状态的地图。在每个悬停状态上，我都​​希望有一个工具提示，而在工具提示内，我希望有一个链接。 事实上，我想要一些类似大洲地图的东西 --> 悬停国家 --> 鼠标悬停 = 工具提示 --> 链接到工具提示中的城市。

我对 HTML / CSS 很陌生，所以我可能只是看不到线索:)

在我当前的解决方案中，当鼠标悬停在整个地图上时会出现工具提示，而不仅仅是当我将鼠标悬停在悬停状态时。可能它只是类的定义？我来自 python，所以我并没有真正得到 class-/id-defintions。

谢谢大家！

这是一种没有链接的方法：

<pre>
    ul#continents3 li a:hover span,ul#continents4 li a:hover span{
        display: block;
        padding: 5px;
        width: 150px;
        background: #000;
        position: relative;
        top: 50%;
        font: 11px Arial,Helvetica,sans-serif;
        opacity: .75;
        filter:alpha(opacity=75);
        color: #FFF;
        pointer-events: on;
    }
    ul#continents3 li a:hover span strong,ul#continents4 li a:hover span strong  {
        display: block;
        margin-bottom: 2px;
        font-size: 12px;
        text-decoration: underline;
    }
</pre> 

这是带有链接的试用版：

<pre>
    p.myTooltip {
    display: none;
    padding: 5px;
    width: 150px;
    margin-top: -5px;
    z-index: 10;
    position: relative;
    opacity: 0.75;
    font: 13px Arial,sans-serif;
    filter:alpha(opacity=75);
    background: #000;
    color: #FFF;
    }
    div:hover  p.myTooltip {
        display: block;
    }
    ul#continents4 li a span div:hover p.myTooltip {
        display: block;
        margin-bottom: 2px;
        font-size: 12px;
        text-decoration: underline;
    }
</pre>

这是我尝试打印工具提示的方式……打印“span”后的“test”，每次我将鼠标悬停在地图上时都会出现其余部分，而不仅仅是在“Spain”上。

<pre>
    <ul id="continents4">
    <li class="Spain"><a href="testlink">
        <span>test
            <div>
            <p class="myTooltip" style="position:absolute; top:0; margin-top:200px; left:50;">
                <a href="h">All cities</a>
                <a href="https://www.google.com">City1</a>
                <a href="https://www.google.com">City2 </a>
            </p>
            </div>
        </span>          
    </a>
    </li>
    </ul>
</pre>

有什么想法吗？

非常感谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）