JavaScript（HTML＆CSS）でマウスオーバーの中に画像を入れて、画像をアニメーションで動く様なソフトを作りたいです。

前提・実現したいこと

JavaScript（HTML＆CSS）でマウスオーバーの中に画像を入れて、画像をアニメーションで動く様なソフトを作っています。
初心者で既存のソースコードを使用し、作っています。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<html>
 <head>

 <style>
.tooltip3{
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.tooltip3 p{
    margin:0;
    padding:0;
}
.description3 {
    display: none;
    position: absolute;
    padding: 10px;
    font-size: 12px;
    line-height: 3em;
    color:#000 ;
    border-radius: 5px;
    background: #CCCCCC;
    width: 400px;
}
.description3:before {
    content: "";
    position: absolute;
    top: -24px;
    right: 60%;
    border: 15px solid transparent;
    border-top: 15px solid #CCCCCC;
    margin-left: -15px;
    transform: rotateZ(180deg);
}
.tooltip3:hover .description3{
    display: inline-block;
    top: 30px;
    left: 0px;
}
 </style>
 <style>
.box {
  width: 100px;
  height: 100px;
  background: #DEB887;
  animation: none running;
}

 </style>

 <style type="text/css">
 img.example1{
 width: 96px;
 height: 65px;
 float: left;
}
 </style>
</head> 


 <body>
<div class="tooltip3">
    <p>$fruit = "りんご";</p>
    <div class="description3"> 
　　『りんご』を『fruit』の箱に代入

    <div class="box"></div>
    <figure class="img-flex-1">
      <img src="りんご.png" alt="[イラスト]" class="example1">
    </figure>
    
　　</div>
</div>

<div class="tooltip3">
　　<p>echo $fruit ;</p>
    <div class="description3">説明を入力してください。 </div>　　

</div>
</body>

</html>

試したこと

画像を横並びにしたいのですが、他のサイトを見てコードを入れてみたのですができませんでした。
マウスオーバーの中に画像を入れることはできたのですが、
現状況は２つの画像が立て並びで下の画像が少しだけ右に動きました。

補足情報（FW/ツールのバージョンなど）

Windows7、メモ帳を使用して作っています。

Lhankor_Mhy

2020/01/15 06:26

『画像を横並びにしたい』とのことですが、imgタグが一つしかないようです。ここでいう「画像」とはなんですか？

orang

2020/01/15 08:31

依頼にお答え下さり、ありがとうございます。りんごの画像です。

Lhankor_Mhy

2020/01/15 08:34 編集

やはり一つしかないように見えますが、ここでいう「横並び」とはどのような意味ですか？　一般に並べるためには複数のものが必要になるかと思います。

orang

2020/01/15 11:41

度々すみません。箱とりんごが横に並んでいる状態です。

orang

2020/01/16 08:53

箱にimgタグをつけ加えたら、横並びになりました。

Lhankor_Mhy

2020/01/16 08:59

解決、ということでしょうか？

orang

2020/01/16 13:42

画像を横並びにする件は解決しました。後は、りんごを箱の中に入れるアニメーションを作るだけです。

Lhankor_Mhy

2020/01/17 01:04

「りんごを箱の中に入れるアニメーション」とは具体的にはどのようなもので、どのような問題が発生していますか？結果（実際に起きたこと）を書きましょう https://teratail.com/help/question-tips#questionTips3-4-1 エラーメッセージや実行ログをコピー&ペーストしましょう https://teratail.com/help/question-tips#questionTips3-4-2 期待した処理結果を書きましょう https://teratail.com/help/question-tips#questionTips3-4-3

orang

2020/01/20 03:29

横移動でりんごを動かそうと思いコードを入れたのですが、動きませんでした。img.example2に横移動のアニメーションをつけました。 <html> <head> <style> .tooltip3{ position: relative; cursor: pointer; display: inline-block; } .tooltip3 p{ margin:0; padding:0; } .description3 { display: none; position: absolute; padding: 10px; font-size: 12px; line-height: 3em; color:#000 ; border-radius: 5px; background: #CCCCCC; width: 400px; } .description3:before { content: ""; position: absolute; top: -24px; right: 60%; border: 15px solid transparent; border-top: 15px solid #CCCCCC; margin-left: -15px; transform: rotateZ(180deg); } .tooltip3:hover .description3{ display: inline-block; top: 30px; left: 0px; } </style> <style type="text/css"> img.example1{ width: 96px; height: 80px; float: left; } .img-flex-1{ position: relative; width: 600px; } .absolute { position: absolute; left: 0px; bottom: 0px color: #006400; } img.example2{ width: 96px; height: 80px; float: left; transition: 1s; -webkit-transition: 1s; } .img-flex-2:hover{ transform: translateX(300px); } </style> </head> <body> <div class="tooltip3"> <p>$fruit = "りんご";</p> <div class="description3"> 　　『りんご』を『fruit』の箱に代入 <figure class="img-flex-1"> <img src="箱.png" alt="[イラスト]" class="example1"> <figcaption class="absolute"><p>変数</p></figcaption> </figure> <figure class="img-flex-2"> <img src="りんご.png" alt="[イラスト]" class="example2"> </figure> 　　</div> </div> <div class="tooltip3"> 　　<p>echo $fruit ;</p> <div class="description3">説明を入力してください。 </div>　　 </div> </body> </html> 箱の中にりんごが入る結果になると思いました。

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

回答1件

ベストアンサー

css
1.img-flex-2{
2transition: 1s;
3}

と書くのがいいと思います。
が、実際には、りんごにマウスホバーしようとすると、.tooltip3からホバーが外れてしまいツールチップが消えてしまうので、りんごにホバーすることができません。

たとえば、「ツールチップが表示されると（りんごにホバーしなくても）りんごが横に動く」というように、フローを改善されてはいかがでしょうか？

投稿2020/01/21 07:59

Lhankor_Mhy

総合スコア36078

orang

2020/01/21 12:20

ありがとうございます。一度やって見ます。すみませんが、フローはどのようにすれば良いですか？

Lhankor_Mhy

2020/01/22 00:19

> フローはどのようにすれば良いですか？ここでいうフローはCSSの配置のフローではなくて、処理の流れのことです。わかりにくくてすみません。 orangさんがどうしたいのか、によるかと思いますが、個人的には「ツールチップが表示されると（りんごにホバーしなくても）りんごが横に動く」という形に変えるのがいいのではないかと思います。

orang

2020/01/22 05:57

ありがとうございます。そうですね、ツールチップの方が良さそうですね。初めはりんごを箱の中にアーチ状に動かそうと思ったのですが、難しそうと思い、横に動かそうと思いました。

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