モバイルデバイスで:hoverをタッチ/クリックに変更する 質問する

いろいろ見てみましたが、探しているものが見つかりません。

現在、私のページには :hover によってトリガーされる CSS アニメーションがあります。メディア クエリを使用してページが幅 700 ピクセルを超えてサイズ変更されたときに、これを「クリック」または「タッチ」に変更したいと思います。

現時点で私が持っているものは次のとおりです:http://jsfiddle.net/danieljoseph/3p6Kz/

ご覧のとおり、:hover はモバイル デバイスでは機能しませんが、ホバーではなくクリックだけで同じように機能することを保証したいと考えています。

可能であれば CSS を使用したいのですが、JQuery でも満足しています。

これは非常に簡単に実行できるような気がしますが、非常に明白なことを見逃しています。どなたか助けていただければ幸いです。

CSS アニメーションは次のとおりです。

.info-slide {
  position:absolute;
  bottom:0;
  float:left;
  width:100%;
  background:url(../images/blue-back.png);
  height:60px;
  cursor:pointer;
  overflow:hidden;
  text-align:center;
  transition: height .4s ease-in-out;
  -webkit-transition: height .4s ease-in-out;
  -moz-transition: height .4s ease-in-out;
}

.info-slide:hover {
  height:300px;
}