我想在悬停个人资料图片后显示文本。我制作了一个“标题”标签,但它无法显示不同段落中的文本。有其他方法可以做到这一点吗?
这是我的 CSS 代码:
.tooltip {
display:none;
position:absolute;
border:1px solid #333;
background-color:#161616;
border-radius:5px;
padding:10px;
color:#fff;
font-size:12px Arial;
}
这是我的 html 代码:
<table style="width:100%">
<tr>
<td><a><img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" width="200" height="200" class="masterTooltip" title="Name: Ching Yuet To; Major/Year: Cell and Molecular Biology/3 "></a></td>
<td><img src="http://2017.igem.org/wiki/images/d/de/Venus.PNG" width="200" height="200"></td>
<td><img src="http://2017.igem.org/wiki/images/8/84/Cathy.PNG" width="200" height="200"></td>
</tr>
</table>
<script>
$(function () {
$(document).tooltip({
content: function () {
return $(this).prop('title');
}
});
});
</script>
最佳答案
这是另一种方法。只需对您的原始代码进行一些更改。希望这会有所帮助。
a {
position: relative;
}
a:after {
position: absolute;
display: none;
content: attr(data-tooltip);
bottom: 0;
border: 1px solid #333;
background-color: #161616;
border-radius: 5px;
padding: 10px;
color: #fff;
font-size: 12px Arial;
}
a:hover:after {
display: block;
}
<table style="width:100%">
<tr>
<td><a data-tooltip="Name: Ching Yuet To; Major/Year: Cell and Molecular Biology/3"><img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" width="200" height="200" class="masterTooltip"></a></td>
<td><a data-tooltip="Tooltip"><img src="http://2017.igem.org/wiki/images/d/de/Venus.PNG" width="200" height="200"></a></td>
<td><a data-tooltip="Tooltip"><img src="http://2017.igem.org/wiki/images/8/84/Cathy.PNG" width="200" height="200"></a></td>
</tr>
</table>
关于jquery - 悬停个人资料图片后的描述文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45749854/