掲題のとおり、cssのcursorが効きません。

レスポンシブで、PCモードにすると効くのですが、モバイルモードにすると効きません。
ブラウザをPCモードにすると、<i>タグで読み込んでいる画像と「合格！」の文字をクリックできます。
ブラウザをモバイル状態にすると、単なる画像と文字が表示されているだけでクリックはできません。

原因と対策を教えてください。

HTML
1<div data-sa="like" data-like-id="1" class="c-response-c_button-like" data-api="/var/sample/add?id=10">
2　　　　<i class="c-response-c_icon-small"></i>
3　　　　<span class="c-response-c__label">合格！</span>
4</div>

divタグには、間違いなく
cursor:pointer;
が設定されています。

CSS
1.c-response-c_button-like[data-sa] {
2    cursor: pointer;
3    -webkit-user-select: none;
4    -moz-user-select: none;
5    -ms-user-select: none;
6    user-select: none;
7}

#やってみたこと
ブラウザをPCモードにしたときのHTMLソースと
ブラウザをモバイル状態にしたときのHTMLソースの比較
その結果　同じでした。

FireFoxのレスポンシブデザインモードでwidth700px以下にすると、ポインタは無効になります。

#この質問のゴール
windows10 FireFox レスポンシブデザインモードでブラウズしたとき
PCモードでも、画面幅を狭くしてモバイルモードに変更した時でも、コードで示した箇所でマウスポインタが手の形状になりクリックができる。
（現状は、PCモードにしたときだけ期待どおりになる。）

spookybird

2018/09/04 12:59

cursorをpointerにするのと、クリックできるのは別です。モバイルではマウスカーソルがないのでcursorをpointerにしても効かないのは当然です。クリックできるかどうかはどうやって判断しているんでしょうか？どこかにクリックによって動く処理があるはずです。ご提示のコードからではわかりません。

sakura-shi

2018/09/04 13:08 編集

いままずやりたいこと、PCモードでブラウズしたときはマウスカーソルは手のマークになりますが、そのまま、画面サイズを小さくしレスポンシブデザインモードにすると同じ箇所はただの文字になります。これを解消したいです

spookybird

2018/09/04 13:20

言ってる意味がよくわからないです。モバイル状態にしたときにマウスカーソルがあるはずないですよね？手のマークとかありません。普段スマホ使っててカーソル出ますか？（ごく一部、特殊なスマホにはカーソルがあるものもあるようですが、それは例外中の例外です。）

sakura-shi

2018/09/04 14:24

PC(windows10環境）で、FireFoxのレスポンシブデザインモードを利用しています。そのうえで、画面幅700px以下になったときに、PCモード時と同じようにクリックができればよいのです。わかりにくくてすみません。お願いします。画面幅については、CSSには、@media screen and (max-width: 700px){}のような記述がある影響かと思いますが、これらの中のどれをみたらcursorを無効にできるのかわかりません。ただ、画面幅を700px以上にしただけで、ポインタは手の形状になりますので、原因はcssではないかと思っていますが、特定ができず困っています。

sakura-shi

2018/09/04 14:55

PC(windows10環境）で、FireFoxのレスポンシブデザインモードを利用しています。そのうえで、画面幅700px以下になったときに、PCモード時と同じようにクリックができればよいのです。わかりにくくてすみません。お願いします。画面幅については、CSSには、@media screen and (max-width: 700px){}のような記述がある影響かと思いますが、これらの中のどれをみたらcursorを無効にできるのか?原因はこれ以外か？わかりません。ただ、画面幅を700px以上にしただけで、ポインタは手の形状になりますので、原因はcssではないかと思っていますが、特定ができず困っています。