在悬停时显示文本框(在表中)
在悬停时显示文本框(在表中)
提问于 2018-09-29 04:37:04
我已经尝试了一段时间在我的表格中创建一个悬停的文本。我一直试图将它添加到悬停在这个<td class="text-left" id="caster_num">1</td>上，但到目前为止还没有成功。我一直在关注这个https://www.w3schools.com/css/css_tooltip.asp和https://www.w3schools.com/howto/howto_css_tooltip.asp。有人能帮帮我吗？
*我希望文本显示在悬停的文本上(在本例中为"1")。
谢谢。
body {
background-color: #2c313a;
font-family: "Roboto", helvetica, arial, sans-serif;
font-size: 16px;
font-weight: 400;
}
div.table-title {
display: block;
margin: auto;
max-width: 600px;
padding: 5px;
width: 100%;
}
.table-title h3 {
color: #fafafa;
font-size: 30px;
font-weight: 400;
font-style: normal;
font-family: "Roboto", helvetica, arial, sans-serif;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
text-transform: uppercase;
}
/*** Table Styles **/
.table-fill {
background: white;
border-collapse: collapse;
height: 320px;
margin: auto;
max-width: 600px;
padding: 5px;
width: 100%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: float 5s infinite;
}
th {
color: #D5DDE5;
background: #1b1e24;
border-bottom: 4px solid #9ea7af;
border-right: 1px solid #343a45;
font-size: 23px;
font-weight: 100;
padding: 10px;
text-align: left;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
vertical-align: middle;
}
th:last-child {
border-right: none;
}
tr {
border-top: 1px solid #C1C3D1;
border-bottom: 1px solid #C1C3D1;
color: #666B85;
font-size: 16px;
font-weight: normal;
text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
tr:hover td {
background: #4E5066;
color: #FFFFFF;
border-top: 1px solid #22262e;
}
tr:first-child {
border-top: none;
}
tr:last-child {
border-bottom: none;
}
tr:nth-child(odd) td {
background: #EBEBEB;
}
tr:nth-child(odd):hover td {
background: #4E5066;
}
td {
background: #FFFFFF;
padding: 10px;
text-align: left;
vertical-align: middle;
font-weight: 300;
font-size: 18px;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
border-right: 1px solid #C1C3D1;
}
td:last-child {
border-right: 0px;
}
th.text-left {
text-align: left;
}
th.text-center {
text-align: center;
}
th.text-right {
text-align: right;
}
td.text-left {
text-align: left;
}
td.text-center {
text-align: center;
}
td.text-right {
text-align: right;
}<body>
<div id="wrapper">
<table class="table-fill">
<thead>
<tr>
<th class="text-left">Name</th>
<th class="text-left">Attribute</th>
</tr>
</thead>
<tbody class="table-hover">
<tr id="caster">
<td class="text-left">Caster</td>
<td class="text-left" id="caster_num">1</td>
</tr>
</tbody>
</table>
</div>
</body>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-09-29 07:07:18
这是一个只有CSS的解决方案，但我不得不修改一下你的html。不确定您是希望工具提示覆盖触发器还是位于触发器的上方，但此示例只是将工具提示直接放在触发器的右侧。您可以根据自己的需要进行修改。
如果您不想包含额外的span，您将需要一些额外的javascript来获取先前td的内容。
这都是基于https://www.w3schools.com/howto/howto_css_tooltip.asp的
https://codepen.io/carbonspace/pen/rqaVzb
HTML
<table class="table-fill">
<thead>
<tr>
<th class="text-left">Name</th>
<th class="text-left">Attribute</th>
</tr>
</thead>
<tbody class="table-hover">
<tr id="caster">
<td class="text-left">Caster</td>
<td class="text-left tooltipTrigger" id="caster_num">1
<span class="tooltip">Caster</span>
</td>
</tr>
</tbody>
</table>CSS
.tooltipTrigger .tooltip {
display: none;
}
.tooltipTrigger:hover {
cursor: pointer;
}
.tooltipTrigger:hover .tooltip {
display: inline;
position: relative; /* relative to .tooltipTrigger */
left: 10px;
border: 1px solid #ccc;
}Stack Overflow用户
发布于 2018-09-29 04:46:55
您可以将鼠标悬停在行上，然后应用一些css
.table-fill tr #caster_num { visibility: hidden; color: transparent; }
.table-fill tr:hover #caster_num { visibility: visible; color: black; }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52562345
复制相关文章
相似问题