Q&A
なるほど。。。
ご丁寧にありがとうございます。
試してみます！
###前提・実現したいこと
sublimetextを使っています。
前提として、今回はhtml,cssのみで実装することが目標です。
そのため、jQuery等による解決方法の提示はご遠慮くださいますよう、お願いいたします。
実現したいこととしては、説明が難しいですがタイトルの通り、
カーソルを画像に合わせるとその画像が上に消えていき、
下にあるformが姿を現わす というアニメーションをつけたいです。
###発生している問題
現時点では、hover時に画像が上に動いて消えていってくれるようにはできています。 問題は、『カーソルを画像から離す前にhoverが解除されて、画像が元の位置に降りてきてしまう』 という点です。 本来であれば、このカーソルを画像の外に持ってきた際に、 hoverが解除されるように設定したいのですが。。。 何か解決策はありますでしょうか？
###該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="Cache-Control" content="no-cache"> 6 <title>Week3課題</title> 7 <link rel="stylesheet" type="text/css" href="style.css"> 8 <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet"> 9 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 10 <script type="text/javascript" src="script.js"></script> 11</head> 12 13 14 15<body> 16 <section> 17 <div class="form-wrap"> 18 19 <form class="effect" method="post" action="mail.php"> 20 <div class="form-box"> 21 <label class="t-title">特別試写会<br>応募申し込みフォーム</label> 22 23 <p> 24 <br>お名前<br> 25 <input type="text" name="sei" maxlength="10" placeholder="姓"> 26 <input type="text" name="mei" maxlength="10" placeholder="名"> 27 </p><br> 28 <p> 29 性別<br> 30 <input type="radio" name="gender" value="male" checked>男性 31 <input type="radio" name="gender" value="female">女性 32 </p><br> 33 <p> 34 年齢<br> 35 <select name="age"> 36 <option value="under15">15歳未満</option> 37 <option value="15~18">15~18歳</option> 38 <option value="19~25" selected>19~25歳</option> 39 <option value="26~35">26~35歳</option> 40 <option value="36~45">36~45歳</option> 41 <option value="46~55">46~55歳</option> 42 <option value="over56">56歳以上</option> 43 </select> 44 </p><br> 45 <p> 46 電話番号<br> 47 <input type="text" name="ph-number" placeholder="例 090-1234-5678" size="16"> 48 </p> 49 <p> 50 Eメールアドレス<br> 51 <input type="text" name="email" placeholder="例 barack.obama@softbank.ne.jp" size="30"> 52 </p><br> 53 <p> 54 当試写会を知った媒体をお教えください。<br> 55 <input type="checkbox" name="media" value="twitter">Twitter 56 <input type="checkbox" name="media" value="facebook">Facebook 57 <input type="checkbox" name="media" value="TOHO">TOHOシネマofficialサイト 58 </p><br> 59 <p> 60 <button type="submit" name="submit" value="送信">Submit</button> 61 <button type="reset" name="reset" value="リセット">Reset</button> 62 </p> 63 </div> 64 </form> 65 </div> 66 <div class="move"> 67 <img class="letter" src="http://stat.ameba.jp/user_images/20130501/03/airmail-m/20/4d/j/o0800045312520591245.jpg"> 68 </div> 69 </section> 70 71 <div id="footer"> 72 <div class="footer-container"> 73 <table> 74 75 </table> 76 </div> 77 78 </div> 79 80 81</body> 82 83 84 85</html> 86
css
1* { 2 margin: 0; 3 padding: 0; 4} 5 6.form-wrap input[type=submitposition:] { 7 color: #7c7873; 8 text-shadow:0 1px 0 #fff; 9} 10 11 12form { 13 width: 60%; 14 margin: 0 auto; 15 background-image: url(http://free-photos-ls04.gatag.net/images/lgf01a201407121600.jpg); 16 font-family: 'Abel', YuMincho; 17 color: white; 18 background-repeat: none; 19 position: relative; 20 overflow: hidden; 21} 22 23label { 24 font-size: 20px; 25} 26 27.t-title { 28 29} 30 31textarea { 32 width: 300px; 33} 34 35textarea:focus, input[type=text]:focus { 36 background:rgba(255,255,255,.35); 37} 38 39.form-box { 40 width: 100%; 41 padding: 30px 0 30px 70px; 42 background-color: rgba(0,0,0,0.5); 43 box-sizing: border-box; 44} 45 46button { 47 background: #EEE; 48 color: #111; 49 box-shadow: 0px 0px 1px rgba(520,000,000,0.3),inset 1px 1px 5px rgba(000,000,520,1),inset -1px -1px 5px rgba(205,0,0,1); 50 width: 100px; 51 padding: 10px 0; 52 font-family: 'Abel'; 53 font-size: 15px; 54 cursor: pointer; 55} 56 57.letter { 58 position: absolute; 59 width: 819.59px; 60 height: 580px; 61 margin: -15px; 62 right: 288px; 63 top: 0; 64 cursor: pointer; 65 transition: 1.5s ease-in-out 0s; 66} 67 68 img:hover { 69 transform: translate(0,-600px); 70} 71 72#footer { 73 white-space: nowrap; 74 width: 100%; 75 text-align: center; 76 margin-right: auto; 77 margin-left: auto; 78 background-color: #000; 79 position: relative; 80} 81 82.footer-container { 83 padding: 30px 0; 84 max-width: 1000px; 85 height: 300px; 86 margin-right: auto; 87 margin-left: auto; 88}
###試したこと
transitionではなく、animationも使ってみましたが、ダメでした。
###補足情報(言語/FW/ツール等のバージョンなど)
現段階では、『transitionでtranslateを使って画像を上にずらして見えなくする』
という方法を取っていますが、
他により良い方法があれば、それも教えていただけるとありがたいです。
ただし、上にも記載した通り、今回はhtmlとcssだけで実装できる方法でお願いいたします。
よろしくお願いします。
回答4件
0
１回hoverすれば、もう二度と画像が元の位置に降りてくる必要はないんですか？
いずれにしても、CSSだけで実現するのは難しいような気がしますね。
hoverで画像を上にずらすので勝手にmouseoutとなり、hover効果が切れて戻ってきてしまいます。
画像をhoverではなくてclickで実現してみてはどうでしょうか？
CSSにclickなどというイベントはないので、チェックボックスを使います。
以下のようなイメージです。
html
1<input type="checkbox id="trigger" /> // CSSで隠す 2<label for="trigger"></label> // CSSで画像にする 3<form> 4</form>
CSS
1#trigger { 2 display: none; 3} 4 5#trigger + label { 6 画像を指定 7 transitionを指定 8} 9 10#trigger:checked + label { 11 上に動かす 12} 13 14form { 15 opacity: 0; 16 transition: opacity 1s; 17} 18 19#trigger:checked ~ form { 20 opacity: 1; 21}
今回の仕様とは少し違いますが、昔CSSのアニメーションの勉強用に作ったものがありますので、
よろしければ参考程度にどうぞ。
https://codepen.io/root_jp/pen/OVJzev
投稿2016/09/02 03:24
総合スコア4666
0
HTML
1 <div class="form-wrap"> 2 3 <form class="effect" method="post" action="mail.php"> 4 <div class="form-box"> 5 <label class="t-title">特別試写会<br>応募申し込みフォーム</label> 6 <p> 7 <br>お名前<br> 8 <input type="text" name="sei" maxlength="10" placeholder="姓"> 9 <input type="text" name="mei" maxlength="10" placeholder="名"> 10 </p><br> 11 <p> 12 性別<br> 13 <input type="radio" name="gender" value="male" checked>男性 14 <input type="radio" name="gender" value="female">女性 15 </p><br> 16 <p> 17 年齢<br> 18 <select name="age"> 19 <option value="under15">15歳未満</option> 20 <option value="15~18">15~18歳</option> 21 <option value="19~25" selected>19~25歳</option> 22 <option value="26~35">26~35歳</option> 23 <option value="36~45">36~45歳</option> 24 <option value="46~55">46~55歳</option> 25 <option value="over56">56歳以上</option> 26 </select> 27 </p><br> 28 <p> 29 電話番号<br> 30 <input type="text" name="ph-number" placeholder="例 090-1234-5678" size="16"> 31 </p> 32 <p> 33 Eメールアドレス<br> 34 <input type="text" name="email" placeholder="例 barack.obama@softbank.ne.jp" size="30"> 35 </p><br> 36 <p> 37 当試写会を知った媒体をお教えください。<br> 38 <input type="checkbox" name="media" value="twitter">Twitter 39 <input type="checkbox" name="media" value="facebook">Facebook 40 <input type="checkbox" name="media" value="TOHO">TOHOシネマofficialサイト 41 </p><br> 42 <p> 43 <button type="submit" name="submit" value="送信">Submit</button> 44 <button type="reset" name="reset" value="リセット">Reset</button> 45 </p> 46 </div> 47 </form> 48 <img class="letter" src="http://stat.ameba.jp/user_images/20130501/03/airmail-m/20/4d/j/o0800045312520591245.jpg"><!-- ここに移動 --> 49 </div> 50 <div id="footer"> 51 <div class="footer-container"> 52 <table> 53 54 </table> 55 </div> 56 57 </div>
CSS
1* { 2 margin: 0; 3 padding: 0; 4} 5 6.form-wrap input[type=submitposition:] { 7 color: #7c7873; 8 text-shadow:0 1px 0 #fff; 9} 10 11 12form { 13 width: 60%; 14 margin: 0 auto; 15 background-image: url(http://free-photos-ls04.gatag.net/images/lgf01a201407121600.jpg); 16 font-family: 'Abel', YuMincho; 17 color: white; 18 background-repeat: none; 19 position: relative; 20 overflow: hidden; 21} 22 23label { 24 font-size: 20px; 25} 26 27.t-title { 28 29} 30 31textarea { 32 width: 300px; 33} 34 35textarea:focus, input[type=text]:focus { 36 background:rgba(255,255,255,.35); 37} 38 39.form-box { 40 width: 100%; 41 padding: 30px 0 30px 70px; 42 background-color: rgba(0,0,0,0.5); 43 box-sizing: border-box; 44} 45 46button { 47 background: #EEE; 48 color: #111; 49 box-shadow: 0px 0px 1px rgba(520,000,000,0.3),inset 1px 1px 5px rgba(000,000,520,1),inset -1px -1px 5px rgba(205,0,0,1); 50 width: 100px; 51 padding: 10px 0; 52 font-family: 'Abel'; 53 font-size: 15px; 54 cursor: pointer; 55} 56 57form::after { /* 足した */ 58 content: ''; 59 right: 0 !important; 60 width: 100% !important; 61 background-color: rgba(230, 230, 0, 0.3); 62 z-index: 1; 63} 64 65.letter,form::after { /* 足した */ 66 position: absolute; 67 width: 819.59px; 68 height: 580px; 69 margin: -15px; 70 right: 288px; 71 top: 0; 72 cursor: pointer; 73 transition: 1.5s ease-in-out 0s; 74} 75 76form:hover + img,form:hover::after { /* 足した */ 77 transform: translate(0,-600px); 78} 79 80#footer { 81 white-space: nowrap; 82 width: 100%; 83 text-align: center; 84 margin-right: auto; 85 margin-left: auto; 86 background-color: #000; 87 position: relative; 88} 89 90.footer-container { 91 padding: 30px 0; 92 max-width: 1000px; 93 height: 300px; 94 margin-right: auto; 95 margin-left: auto; 96} 97```**動くサンプル：**[https://jsfiddle.net/wu1xstb6/](https://jsfiddle.net/wu1xstb6/)
投稿2016/09/03 07:40
総合スコア69400
0
今のままだと入力しようとしたときに画像が落ちてくるので、
仕様としては「.form-wrap」上にカーソルがあるとき画像がスライドアップするという感じだと思います。
ということでこういう感じではいかがでしょうか？
「.form-wrap」の中に「.move」を入れ込みます。
html
1<div class="form-wrap"> 2 <form class="effect" method="post" action="mail.php"> 3 ～略～ 4 </form> 5 <div class="move"> 6 <img class="letter" src="http://stat.ameba.jp/user_images/20130501/03/airmail-m/20/4d/j/o0800045312520591245.jpg"> 7 </div> 8</div>
css
1 .form-wrap:hover .move .letter { 2 transform: translate(0,-600px); 3}
あとは「.form-wrap」のhover範囲が横幅いっぱいなのでCSSで微調整すればいい感じになると思います。
投稿2016/09/02 06:17
総合スコア2722
0
ベストアンサー
擬似要素を使えば似たような動きができました。
…ですが、結局メインの要素に対しての擬似要素の背景(画像)がホバー時にめくれ上がるだけで、本来のメインの要素はそこにずっといるのでどの道その要素が邪魔して文字入力ができませんでした。
一応コードをいじったので送ります。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="Cache-Control" content="no-cache"> 6 <title>Week3課題</title> 7 <link rel="stylesheet" type="text/css" href="style.css"> 8 <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet"> 9 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 10 <script type="text/javascript" src="script.js"></script> 11</head> 12 13 14 15<body> 16 <section> 17 <div class="form-wrap"> 18 19 <form class="effect" method="post" action="mail.php"> 20 <div class="form-box"> 21 <label class="t-title">特別試写会<br>応募申し込みフォーム</label> 22 23 <p> 24 <br>お名前<br> 25 <input type="text" name="sei" maxlength="10" placeholder="姓"> 26 <input type="text" name="mei" maxlength="10" placeholder="名"> 27 </p><br> 28 <p> 29 性別<br> 30 <input type="radio" name="gender" value="male" checked>男性 31 <input type="radio" name="gender" value="female">女性 32 </p><br> 33 <p> 34 年齢<br> 35 <select name="age"> 36 <option value="under15">15歳未満</option> 37 <option value="15~18">15~18歳</option> 38 <option value="19~25" selected>19~25歳</option> 39 <option value="26~35">26~35歳</option> 40 <option value="36~45">36~45歳</option> 41 <option value="46~55">46~55歳</option> 42 <option value="over56">56歳以上</option> 43 </select> 44 </p><br> 45 <p> 46 電話番号<br> 47 <input type="text" name="ph-number" placeholder="例 090-1234-5678" size="16"> 48 </p> 49 <p> 50 Eメールアドレス<br> 51 <input type="text" name="email" placeholder="例 barack.obama@softbank.ne.jp" size="30"> 52 </p><br> 53 <p> 54 当試写会を知った媒体をお教えください。<br> 55 <input type="checkbox" name="media" value="twitter">Twitter 56 <input type="checkbox" name="media" value="facebook">Facebook 57 <input type="checkbox" name="media" value="TOHO">TOHOシネマofficialサイト 58 </p><br> 59 <p> 60 <button type="submit" name="submit" value="送信">Submit</button> 61 <button type="reset" name="reset" value="リセット">Reset</button> 62 </p> 63 </div> 64 </form> 65 </div> 66 <div class="move"> 67 68 </div> 69 </section> 70 71 <div id="footer"> 72 <div class="footer-container"> 73 <table> 74 75 </table> 76 </div> 77 78 </div> 79 80 81</body> 82 83 84 85</html>
css
1* { 2 margin: 0; 3 padding: 0; 4} 5 6.form-wrap input[type=submitposition:] { 7 color: #7c7873; 8 text-shadow:0 1px 0 #fff; 9} 10 11 12form { 13 width: 60%; 14 margin: 0 auto; 15 background-image: url(http://free-photos-ls04.gatag.net/images/lgf01a201407121600.jpg); 16 font-family: 'Abel', YuMincho; 17 color: white; 18 background-repeat: none; 19 position: relative; 20 overflow: hidden; 21} 22 23label { 24 font-size: 20px; 25} 26 27.t-title { 28 29} 30 31textarea { 32 width: 300px; 33} 34 35textarea:focus, input[type=text]:focus { 36 background:rgba(255,255,255,.35); 37} 38 39.form-box { 40 width: 100%; 41 padding: 30px 0 30px 70px; 42 background-color: rgba(0,0,0,0.5); 43 box-sizing: border-box; 44} 45 46button { 47 background: #EEE; 48 color: #111; 49 box-shadow: 0px 0px 1px rgba(520,000,000,0.3),inset 1px 1px 5px rgba(000,000,520,1),inset -1px -1px 5px rgba(205,0,0,1); 50 width: 100px; 51 padding: 10px 0; 52 font-family: 'Abel'; 53 font-size: 15px; 54 cursor: pointer; 55} 56 57.letter { 58 position: absolute; 59 width: 819.59px; 60 height: 580px; 61 margin: -15px; 62 right: 288px; 63 top: 0; 64 cursor: pointer; 65 transition: 1.5s ease-in-out 0s; 66} 67 68.move { 69 position: absolute; 70 width: 819.59px; 71 height: 580px; 72 margin: -15px; 73 right: 288px; 74 top: 0; 75 cursor: pointer; 76 transition: 1.5s ease-in-out 0s; 77} 78 79 .move::before { 80content: ''; 81position: relative; 82background-image: url("http://stat.ameba.jp/user_images/20130501/03/airmail-m/20/4d/j/o0800045312520591245.jpg"); 83background-repeat: no-repeat; 84border-top: 1px solid #f13d63; 85border-right: 818px solid transparent; 86border-left: 1px solid transparent; 87border-bottom: 490px solid transparent; 88bottom: -100px; 89left: 0%; 90z-index: 1; 91 -webkit-box-sizing: border-box; 92 -moz-box-sizing: border-box; 93 box-sizing: border-box; 94 -webkit-transition: all 1.3s; 95 transition: all 1.3s; 96 } 97 98 99 .move:hover::before { 100 border-bottom: 0px solid transparent; 101 transform: translate(0,-600px); 102 -webkit-box-sizing: border-box; 103 -moz-box-sizing: border-box; 104 box-sizing: border-box; 105 -webkit-transition: all 1.3s; 106 transition: all 1.3s; 107 } 108 109 img:hover { 110 transform: translate(0,-600px); 111} 112 113#footer { 114 white-space: nowrap; 115 width: 100%; 116 text-align: center; 117 margin-right: auto; 118 margin-left: auto; 119 background-color: #000; 120 position: relative; 121} 122 123.footer-container { 124 padding: 30px 0; 125 max-width: 1000px; 126 height: 300px; 127 margin-right: auto; 128 margin-left: auto; 129}
ざっくり作ったのでwidthが合ってなかったり、ちゃんとホバー時に消えてなかったりするので調整してください。あくまでこういう動きは達成したというものですので。
ひとつ明確な解決策をあげるとすれば、今回は空の「.move」にbeforeをつけて擬似要素にレター画像を貼り付けホバーさせました。ということは、「.move」の中にフォーム画面のhtmlを入れることで目的は達成できるのでは？と思います。試していないのでわかりませんがほぼいけると思います。
頑張ってください。
適当に書いたのでコード汚くて申し訳ありません。
投稿2016/09/02 07:22
総合スコア40
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/09/02 03:33
2016/09/02 04:53
2016/09/02 06:25