应用＃1般突出显示表行

我想复制StackExchange网站的内部链接的行为：假设我有这个在我的网页：应用＃1般突出显示表行

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

来源

2017-10-09 texnic

CSS'：target'伪类。坚持一个简单的动画和工作完成。 –

@NiettheDarkAbsol，你可以用一个简短的例子作为答案吗？ – texnic

基于由@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

来源

2017-10-10 09:48:45 texnic

应用＃1般突出显示表行

回答

相关问题