应用#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。
答
基于由@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
CSS':target'伪类。坚持一个简单的动画和工作完成。 –
@NiettheDarkAbsol,你可以用一个简短的例子作为答案吗? – texnic