Question

从下面的示例HTML中，是否可以在CSS中为每个<td>元素添加点击事件？或在CSS中识别<td>元素被点击/悬停？一行中<td>的数量可以增加。

<table>
<tr class="tr-format">
    <td>
        Data1
        <div>PopUp</div>
    </td>
    <td>
        Data2
        <div>PopUp</div>
    </td>
</tr>
<tr class="tr-format">
    <td>
        Data1
        <div>PopUp</div>
    </td>
    <td>
        Data2
        <div>PopUp</div>
    </td>
</tr>
</table>

我计划在点击<td>后显示一个PopUp或PopOver，这些弹出窗口将包含每个<td>的不同数据。

Answer 1

点击某些内容的事件通常在Javascript中定义，而不是CSS。是的，您可以使用pseudo classes和animations等新功能在CSS3中执行此操作，但我建议您查看如何在JS中执行此操作。 Jquery对于那种事情来说真的很容易使用。

Answer 2

.tr-format td将此选择器用于CSS。你需要Javascript或Jquery来附加事件。

$('.tr-format td').on('click',function(){//do something here });

Answer 3

试试这个：

$(".tr-format td").each().on('click', function() { /**magic here**/ });

在CSS中标识没有id的每个元素

3 个答案: