タップでボタンが表示されるCSSを書きたい

###起こっている問題

Railsを使ったWebアプリケーションにて、上のイメージ画像のようなマウスオーバー時にボタンを表示＋ボタンをクリックするとリンクへとぶ画面を実装しています。

スマホでも同様のことができるようにしたいのですが、ontouchstart属性と:hoverの組み合わせだと、タップした際「ボタンを表示＋クリック」が同時に行われてしまいます。

タップでボタンを表示させるだけのCSSというのは書けないものでしょうか？

###ソースコード

html
1・
2・
3<div class="random-movie">
4	<div class="icon-button" ontouchstart="">
5		<div class="jump-message" ontouchstart="">
6			<%= link_to("#message") do %>
7				<img src="jump_message_button.svg">
8			<%end%>	
9			<p><%=link_to("観る！","/#message" , class:"jump-message-text")%></p>
10		</div>
11		<div class="jump-index" ontouchstart="">
12			<%=link_to "movie/#{movie.id}" do %>
13				<img src="jump_index_button.svg">
14			<% end %>
15			<p><%=link_to("詳細","/movie/#{movie.id}" , class:"jump-index-text")%></p>
16		</div>
17	</div>
18	<div class="random-title">
19		<%= movie.title %>
20	</div>
21	<div class="random-story">
22		  <p class="movie-story"><%= movie.story%></p>
23	</div>
24</div>
25・
26・

CSS
1.icon-button {
2        position: absolute;
3        top: 50%;
4        left: 50%;
5        transform: translateY(-50%) translateX(-50%);
6        z-index: 1;
7        width: 100%;　/*親要素と全く同じ大きさの子要素が被さっている*/
8        height: 100%;
9        background-color: #6B7AAE;
10        opacity: 0;
11    }
12
13    .icon-button:hover {
14        animation: 0.3s fadeIn-button forwards;
15    }
16
17    @keyframes fadeIn-button { 
18		0% {opacity: 0} 
19        100% {opacity: 0.9} /*マウスオーバー時、不透明度0〜0.9にフェードインする*/
20    }

###試したこと

2つのボタン（jump-messageとjump-index）だけvisibility:hiddenで非表示
▶︎:hoverで、タップ時にvisibleになるようにする

結果：変わらず、表示と同時にボタンを押してしまう

何卒、ご教授のほどお願いいたします。

行動規範の内容に同意します

回答2件

ご回答の通り、CSSでは無理でした。
jQueryにて実装済みです。

投稿2020/10/05 06:49

退会済みユーザー

総合スコア0

ベストアンサー

調べた範囲ですが質問者様がしたいような動きをCSSだけで再現させるのは難しいようです。
「ontouchstart属性と:hover」の組み合わせですがPCで行うhoverとは動きが違います。
(iphoneで確認)
まずその問題を解決しなければならないのですがCSSでのタッチパネル機能についての
要件に該当する物を発見することができませんでした。

方法論の一つですが簡単なjQuery(javascript)を使う事によってhoverの動作は解決する事はできるそうです。

投稿2020/10/02 01:13