2017-10-09 4 views
0

Je voudrais reproduire le comportement de liaison interne des sites StackExchange: en supposant que j'ai dans ma page:Appliquer la mise en évidence Stackoverflow ressemblant à une ligne de table

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

et un lien dans la même page

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

Je veux que la deuxième rangée soit mise en évidence brièvement. Comment ça marche?

Un exemple de surlignage souhaité peut être vu par ex. lorsque vous cliquez sur here.

+1

CSS ': target' pseudo-classe. Collez une animation simple sur cela et le travail fait. –

+0

@NiettheDarkAbsol, pourriez-vous l'afficher comme une réponse avec un court exemple? – texnic

Répondre

0

Basé sur le commentaire de @NietTheDarkAbsol et another answer que j'ai trouvé, voici la solution à la ligne liée au tableau

<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