javascript 鼠标悬停时显示文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17410381/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display text on mouseover
提问by derekwiking
Hy there, this is what I have reached since now:
你好，这就是我从现在起达到的目标：
<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 </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>
</p>
<p>
</p>
</div>
</div>
and here the URL: http://www.dieraber.altervista.org/index.php/en/rennstrecken-terminennI would like that on clicking the month the table is displayed just like it is now, and that on mouseover the month link it is displayed too. Can anyone help me? Thx
和这里的 URL：http: //www.dieraber.altervista.org/index.php/en/rennstrecken-terminenn我希望点击月份时表格显示就像现在一样，鼠标悬停在月份上时链接它也显示。谁能帮我？谢谢
回答by theftprevention
You can attach the onmouseoverand onmouseoutattributes to your hyperlinks.
您可以将onmouseover和onmouseout属性附加到您的超链接。
<a href="javascript:unhide('Juli');" onmouseover="unhide('Juli');" onmouseout="unhide('Juli');"><span style="color:#000000;">Juli</span></a>
I notice you're using the same function to hide and unhide. You may want to create two separate functions, because with the code I've supplied, hovering the mouse over the link will unhide it, but clicking the link will then hide it again.
我注意到您使用相同的功能来隐藏和取消隐藏。您可能想要创建两个单独的函数，因为使用我提供的代码，将鼠标悬停在链接上将取消隐藏它，但单击该链接将再次隐藏它。
回答by SHernandez
There is also the titleattribute:
还有一个title属性：
<span title="this is the tooltip text">hove me</span>
回答by Ian Clark
You could probably do that without JavaScript with just CSS:
你可能可以在没有 JavaScript 的情况下只用 CSS 来做到这一点：
.item-page h3:hover + div .hidden {
display:block;
visibility:visible;
}
