我有一个html td
元素,里面有文字。我需要它,以便您可以将鼠标悬停在该元素上,并在活动页面/元素顶部显示一个文本框,以解释td标签内容的含义。某种阐述。像<abbr>
标签一样。TextBox'popup'display on mouseover/hover for CSS/Javascript
这可以在CSS或Javascript中完成吗?
我有一个html td
元素,里面有文字。我需要它,以便您可以将鼠标悬停在该元素上,并在活动页面/元素顶部显示一个文本框,以解释td标签内容的含义。某种阐述。像<abbr>
标签一样。TextBox'popup'display on mouseover/hover for CSS/Javascript
这可以在CSS或Javascript中完成吗?
这可能与CSS,也与JavaScript。与元素创建一个表:
<table>
<tr><td>
<a href="#">Info
<div class="tooltipcontainer">
<div class="tooltip">Here some info</div>
</div>
</a>
</td></tr>
</table>
CSS:
/* Container is necessary because td cannot be positioned relative */
td .tooltipcontainer {
position: relative;
}
td .tooltip {
display: none;
position: absolute;
/* More positioning, heigh, width, etc */
}
td a:hover .tooltip {
display: block;
}
当你将鼠标悬停在 '信息',它会显示在带class = '提示' div中的文本。 JavaScript(例如任何jQuery工具提示插件)具有更多选项的解决方案。
示例标记..
<td id="1">..</td>
<td id="2">..</td>
<td id="thisiswhatiwanttohaveahover"><div class="tooltip hidden"></div></td>
CSS样式
.visible {
display:block;
}
.hidden {
display:none;
}
可以
$('#thisiswhatiwanttohaveahover').hover(function() {
if ($(this + ' .tooltip').hasClass('hidden')) {
$(this + ' .tooltip').removeClass('hidden');
$(this + ' .tooltip').addClass('visible');
}
if ($(this + ' .tooltip').hasClass('visible')) {
$(this + ' .tooltip').removeClass('visible');
$(this + ' .tooltip').addClass('hidden');
}
});
希望这有助于..
谢谢,这看起来像一个很好的JS解决方案。会尝试一下 – DextrousDave 2012-03-22 18:49:27
当然..很高兴我做了一个帮助:) – 2012-03-22 23:08:09
这对于可用性会更好y tbh – mickburkejnr 2012-03-22 12:25:55
谢谢。这是我寻找的那种CSS解决方案。但我认为Javascript解决方案有更多好处。 – DextrousDave 2012-03-22 18:59:03