落ちゲーアプリ作成18（ゲームスタート前の襖移動）

前回に引き続き、今回もゲームスタート前に襖を設定し、ボタンにより襖が開く動作を入れていきたいと奮闘中。

j-query を導入する方法もあるらしいのですが、よくわからないので、css でやっていきたいと思っています。

CSS3のtransitionで使えるイベント〜transitionのトリガー | IT工房｜AI入門とWeb開発

以前 css で動きをつけた時は、@keyframes アニメーション名 {アニメーション内容} で行いましたが、今回はボタンクリックをトリガーに襖を開くだけなので、いけるのではないかと思っていましたが、難航。

サンプルのコードをVSコードに写していじっていると、子要素か兄弟要素にのみ反応するようで、兄弟の子要素同士では反応しませんでした。

これを参考に、

html.erb を以下にし、

<%= image_tag "襖１左.jpg", class:'fusuma_left' %>

<%= image_tag "襖１右.jpg", class:'fusuma_right' %>

<a class="sound_start">音ありでプレイ</a>

<a class="no_sound_start">無音でプレイ</a>

css を以下にして、

.sound_start {

position: absolute;

top: 40%;

left: 50%;

transform: translateX(-50%);

padding: 8px;

background-color: blue;

border: 1px solid black;

border-radius: 10px;

transition-property :all 1s;

}

.no_sound_start:hover ~ .sound_start {

left: -50%;

}

やってみたが、動かず！

原因不明で、また時間のある時に進めていきます。

ITパスポートや、カリキュラムの復習、カリキュラムの付属カリキュラムである java の勉強（IntelliJ がうまく動かずなかなか進まない）、就職活動を同時進行で行なっており、なかなか一つずつを大きく進めることができていませんが、引き続き頑張っていきます。