我遇到了一个问题,在我的HTML代码.我试图显示一个按钮,当你悬停在一个表中的一行.现在按钮只显示当你悬停在它附近,但我需要它显示当你悬停在该行的任何地方.有人能帮助解释如何做到这一点?
.button {
opacity: 0;
}
.button:hover {
display: inline-block;
opacity: 1;
}
<table>
<tr>
<div class="button">
<a href="#"></a>
</div>
<td><img src="/app/images/todo/todos_incomplete_blue.svg" /></td>
<td>Make a To Do List</td>
<td>Me Myself and I</td>
<td>Whenever I want</td>
<td>69%</td>
<td>
<div class="button">
<img src="/app/images/master/actions_btn.svg" />
<a href="#"></a>
</div>
</td>
</tr>
</table>
2条答案
按热度按时间svdrlsy41#
现在,一个按钮只有在你直接在它上面的时候才会显示。为了在它的表格行被悬停的时候显示一个按钮,把你的CSS定义设置为在悬停行里面的目标按钮:
还有:
1.根据permitted content of
<tr>
elements,<div>
中的<tr>
元素是无效的,我已经删除了它们,但是如果需要,可以将它们 Package 在<td>
元素中。1.我冒昧地将
.button
图像放在它们的<a>
元素中,尽管我不确定这是否是您的意图。1.我注意到悬停效果在单元格之间的空格上不起作用,这会导致悬停区域出现间隙,所以我设置
border-collapse:collapse;
并单独填充单元格。zf9nrax12#
我的理解是从解释
我正在尝试显示按钮
如果是这样的话,只需用jQuery将trigger悬停在一个按钮上。
因此,假设我们将
ID
添加到:<tr id="myrow">
,在<div class="button">
中我们还添加了ID
:<div class="button" id="mybtn">
在jQuery中,我们有: