javascript - 鼠标悬停时显示文本

Question

嗨，这是我从现在开始达到的目标：

 <script type="text/javascript">
 function unhide(divID) {
 var item = document.getElementById(divID);
 if (item) { 
 item.className=(item.className=='hidden')?'unhidden':'hidden'; }}
 </script>
<h3><strong><a href="javascript:unhide('Juli');"><span style="color:#000000;">Juli</span></a></strong></h3>
<div id="col2">
    <div id="Juli">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Von</th>
                    <th>Bis</th>
                    <th>Promoter</th>
                    <th>Strecke</th>
                    <th>Preis</th>
                    <th>Anmeldung</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>08.07.2013</td>
                    <td>08.07.2013</td>
                    <td><a href="index.php/en/events-promoters/rehm">REHM RACEDAYS</a></td>
                    <td>Imola</td>
                    <td>245,00 €&lt;/td>
                    <td><a href="">ausgebucht</a></td>
                </tr>
                <tr>
                </tbody>
        </table>
    </div>
    <h3>
        <strong><a href="javascript:unhide('August');"><span style="color:#000000;">August</span></a></strong></h3>
    <div id="col3">
        <div class="hidden" id="August">
            <table class="table table-striped">
                <thead>
                    <tr>
                                            <th>Von</th>
                        <th>Bis</th>
                        <th>Promoter</th>
                        <th>Preis</th>
                        <th>Link</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <p>
            &nbsp;</p>
        <p>
            &nbsp;</p>
    </div>
</div>

和这里的 URL：http ://www.dieraber.altervista.org/index.php/en/rennstrecken-terminenn 我希望在单击月份时，表格会像现在一样显示，并且在鼠标悬停在月份时链接它也显示出来。谁能帮我？谢谢

Answer 1

您可以将onmouseover和onmouseout属性附加到您的超链接。

<a href="javascript:unhide('Juli');" onmouseover="unhide('Juli');" onmouseout="unhide('Juli');"><span style="color:#000000;">Juli</span></a>

我注意到您使用相同的功能来隐藏和取消隐藏。您可能想要创建两个单独的函数，因为使用我提供的代码，将鼠标悬停在链接上会取消隐藏它，但单击链接会再次隐藏它。

Answer 2

还有一个title属性：

<span title="this is the tooltip text">hove me</span>

Answer 3

你可能不用 JavaScript 只用 CSS 就可以做到这一点：

.item-page h3:hover + div .hidden { 
    display:block;
    visibility:visible;
}