2017-06-28 6 views
-5

私はこのページの上部に一連の質問があるFAQページを持っています。これらの質問は、回答があるページのセクションへのリンクです(例:https://www.unicefusa.org/about/faq)。html/cssだけでhtml要素を数秒間強調表示するにはどうすればよいですか?

上記のリンク先に行くと、ページの上部にリストされている質問をクリックすると、そのページが回答を提供するセクションにジャンプします。私はリンクがジャンプする(クリックされる)ページのセクションを一時的にハイライト表示することがどのように可能であろうと思っています。 html/cssでこれを行うことは可能ですか?

+2

はい可能です。あなたがジャンプした要素は、疑似クラス ':target'によって実際に選択可能です。必要なのはCSSアニメーションを追加することだけです(' animation-iteration-count'を1に設定してください)。 – Terry

+0

https://codepen.io/mcoker/pen/yXpjEx –

+0

@Terryありがとうございました、それはトリックでした。アニメーションスタイルを追加する:ターゲット作品。唯一の問題は、同じリンクが2回クリックされたときに機能しないことです。たとえば、リンクを1回クリックすると、ページが関連するセクションに移動し、アニメーションが機能します。リンクにスクロールしてもう一度クリックすると、関連セクションに戻りますがアニメーションは表示されません。同じリンクを2回連続してクリックしないと、アニメーションは常に機能します。それを修正する方法がわからない... – hvasam

答えて

0

申し訳ありませんが、CSS:ターゲットセレクタ岩も、この

0

のために私はちょうど最近、あなたが探しているまさにかもしれ@keyframes、を知りました。これと:targetこれで元のCSSに戻って元に戻りますので、cssを使用して、選択したテキストの色を変更し、選択したままにしておくことができます。リンクのCSSに:「フォーカス」、それはあなたがCSSに追加色が表示されます、あなたは対象区間IDを追加した場合はここで

div { 
    width: 200px; 
    height: 200px; 
    background-color: white; 
    animation-name: test; 
    animation-duration: 4s; 
} 

@keyframes test { 

    from {background-color: white;} 
    to {background-color: red;} 
} 

は例 https://jsfiddle.net/Arparas/oe7twew8/

0

へのリンクです瞬間リンクをクリックして保持すると、それを見ることができます。 例: a:フォーカス{ color: yellow; }

関連する問題