将类似 Stackoverflow 的突出显示应用到 table 行

Question

我想复制 StackExchange 站点的内部 linking 行为：假设我的页面中有这个：

<table>
  <tr><td><a name="1"></a>1</td></tr>
  <tr><td><a name="2"></a>2</td></tr>
  <tr><td><a name="3"></a>3</td></tr>
</table>

和一个link在同一页

<a href="#2">link</a>

我想让第二行简单地突出显示。它是如何工作的？

可以看到所需突出显示的示例，例如单击 here.

时

Answer 1

根据@NietTheDarkAbsol 的评论和我发现，这是 table

中链接行的解决方案

<style>
    :target {
        animation: highlight 2000ms ease-out;
    }
    @keyframes highlight {
        0% {
            background-color: darkorange;
            }
        100% {
            background-color: white;
            }
    }

</style>

<table>
   <tr id="1"><td>1</td></tr>
   <tr id="2"><td>2</td></tr>
   <tr id="3"><td>3</td></tr>
</table>

<a href="#1">link</a>
<a href="#2">link</a>
<a href="#3">link</a>

JSFiddle：https://jsfiddle.net/2vac8crd/1

将类似 Stackoverflow 的突出显示应用到 table 行

Apply Stackoverflow-like highlighting to a table row

html

highlight

hyperlink