inputを動かしたい

よろしくお願い致します。
こういったコードがあるのですが、こちらのdiv class="submit”の部分を動かすにはどうしたらいいでしょうか。
ホバー時に下に20px程動くようにしたいのですが。``

<div Align="center">
<a href="http://ランディングページのURL">
<img src="http://自分のメルマガ登録のバナー画像">
</a>

<div id="content_form"><form action="https://example.com/xxxxxx" enctype="multipart/form-data" id="UserItemForm" method="post" accept-charset="utf-8" style="width: 60%; margin-right: auto; margin-left: auto;"><input type="hidden" name="_method" value="POST"/>


<input name="data[User][name1]" id="Username1" value="" class="form_input_input" placeholder="お名前" type="text"/></div>
<input name="data[User][mail]" id="Usermail" value="" class="form_input_input" placeholder="メールアドレス" type="text"/></div>

<div class="submit"><input type="submit" value="メール講座に登録" style="width: 60%; height: 40px"/></div>```ここに言語を入力 <input type="hidden" id="server_url" value="https://example.com/"/><input type="hidden" name="data[User][referer_form_url]" value="" id="UserRefererFormUrl"/><input type="hidden" name="data[User][referer_url]" value="" id="UserRefererUrl"/> ```<script type="text/javascript"></script></form></div><script src="https://hogehoge.com/js/validation.js"></script> </div> ```

kei344

2017/07/16 13:58

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、適宜改行とインデントを入れてください。また、例示用ドメインはご自身で所有されていない限り example.com, example.jp, example.co.jp など例示用に予約されたドメイン名を利用してください。 http://www.atmarkit.co.jp/fwin2k/win2ktips/801exampledom/exampledom.html

o-ban

2017/07/16 14:31

失礼しました。こんな感じでよろしいでしょうか。

kei344

2017/07/16 14:36

バッククオート3つの前後には改行を入れてください。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

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

回答1件

ベストアンサー

的外れかもしれませんが、以下のようにしてみてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        .form_input_input {
13            width: 100% !important;
14            display: inline-block !important;
15            height: 2em;
16            text-indent: 1em;
17            line-height: 2em;
18            margin-top: 20px;
19        }
20
21        .form_input_vertical {
22            display: block !important;
23        }
24
25        .form_input_horizontal {
26            display: inline-block !important;
27        }
28
29        div.right_block {
30            width: 60%;
31            word-break: break-all;
32            display: inline-block;
33        }
34
35        #content_form {
36            background-color: #fff !important;
37            padding: 0px !important;
38        }
39
40        /* 追加ここから */
41        div.submit:hover {
42            position: relative;
43            bottom: -20px;
44        }
45        /* 追加ここまで */
46    </style>
47</head>
48<body>
49<div class="input text required">
50    <input name="data[User][name1]" id="Username1" value="" class="form_input_input" placeholder="お名前" type="text"/>
51</div>
52<input name="data[User][mail]" id="Usermail" value="" class="form_input_input" placeholder="メールアドレス" type="text"/></div>
53<div class="submit">
54    <input type="submit" value="メール講座に登録" style="width: 60%; height: 40px"/>
55</div>
56<input type="hidden" id="server_url" value="https://hogehoge1.com/"/>
57<!-- ▼リファラ -->
58<input type="hidden" name="data[User][referer_form_url]" value="" id="UserRefererFormUrl"/>
59<input type="hidden" name="data[User][referer_url]" value="" id="UserRefererUrl"/>
60<script type="text/javascript">
61    <!--
62    if (document.referrer.length != 0) {
63        if (document.getElementById("UserRefererUrl")) {
64            document.getElementById("UserRefererUrl").value = document.referrer;
65        }
66    }
67    if (document.getElementById("UserRefererFormUrl")) {
68        document.getElementById("UserRefererFormUrl").value = location.href;
69    }//--></script><!-- ▲リファラ --></form></div>
70<script src="https://hogehoge.com/js/validation.js"></script>
71</body>
72</html>