Question

我想复制StackExchange网站的内部链接行为：假设我在页面中有这个：

<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>

和同一页面中的链接

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

我希望第二行能够简要地突出显示。它是如何工作的？

可以看到所需突出显示的一个例子，例如点击here。

Answer 1

根据我发现的@NietTheDarkAbsol和another answer的评论，这里是表格中链接行的解决方案

<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类似的突出显示应用于表格行

1 个答案: