はてなブログでjQueryを使用した答えを隠す問題を作る

作成イメージ

文字が消えている部分にマウスを当ててみてください。
問題の答えが赤く表示されると思います。

マイクロソフトのクラウド プラットフォームの製品の名称はMicrosoftAzureである。

参考ページ

詳細はこちらのページをご覧ください。
www.yukisako.xyz

手順① 記事の中にjqueryを埋め込む

以下のコードをそのまま記事の一番下に貼り付けます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('strong').css('color','white');
$('strong').css('border-bottom','dashed 1px #000000');
});
$('strong').hover(function(){
$(this).css('color','red');
},function(){
$('strong').css('color','white');
$('strong').css('border-bottom','dashed 1px #000000');
});
</script>

手順② 隠したい文字をアンダーバー2つで"__"で囲みます。

今回は「かきくけこ」を隠してみる。

あいうえお__かきくけこ__さしすせそ

実際に表示されるのが下。
マウスを消えている部分にホバーしたり、
スマホでタップすると消えていた文字が赤くなって表示される。

あいうえおかきくけこさしすせそ

やりたいこと

これで資格試験問題の一問一答集とか作りたい。