お世話になりますm(..)m
■やりたいこと
footer をhoverすると、
div:footer_box内のスパンタグが、真上に伸びる(scale)させたく以下書いていますが、
■現状
scaleするときに、なぜか右斜め上方向に、伸びてしまいます。
(hover前の位置とりをpositio:absolute,left:50%指定しているのが
原因?かなと思うものの、left:50%のまま、hover後もニョキッと上に伸ばしたいです><)
html
1 2<footer class="footer"> 3 <div id="footer_box"> 4 5 <img src="../image/dog_kage.png" alt="dog_kage"> 6 <p class="footer_tittle gf">GET IN TOUCH</p> 7 <span class="yokobou"></span> 8 </div> 9</footer> 10 11<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 12<script> 13$(document).ready(function () { 14$(".footer").hover( 15function () { 16$(".yokobou").addClass("new-class"); 17}, 18function () { 19$(".yokobou").removeClass("new-class"); 20} 21); 22}); 23 24$(document).ready(function () { 25$(".footer").hover( 26function () { 27$(".footer_tittle").addClass("font"); 28}, 29function () { 30$(".footer_tittle").removeClass("font"); 31} 32); 33}); 34</script> 35 36 37css--------------------------- 38.footer_box{ 39 position:relative; 40 height: 400px; 41 width: 100%; 42} 43.footer img{ 44 position: absolute; 45 width: 8%; 46 top: 50%; 47 left: 50%; 48 -ms-transform: translate(-50%,-50%); 49 -webkit-transform : translate(-50%,-50%); 50 transform : translate(-50%,-50%); 51} 52div p .font-color{ 53 color: #000; 54} 55.footer_tittle{ 56 position: absolute; 57 color: #FFF; 58 font-weight: 500; 59 font-size: 1.3em; 60 letter-spacing: 0.1em; 61 z-index: 999; 62 top: 50%; 63 left: 50%; 64 -ms-transform: translate(-50%,-50%); 65 -webkit-transform : translate(-50%,-50%); 66 transform : translate(-50%,-50%); 67} 68.yokobou{ 69 color: #FFF; 70 position:absolute; 71 display: block; 72 width: 160px;; 73 height: 5px; 74 background: #FFF; 75 top:54%; 76 left:50%; 77 -ms-transform: translate(-50%,-50%); 78 -webkit-transform : translate(-50%,-50%); 79 transform : translate(-50%,-50%); 80 transition: all 0.6s ease; 81} 82.new-class{ 83 position: absolute; 84 transform: scaleY(10); 85 transform-origin: bottom; 86 width: 160px; 87 left:50%; 88} 89.font{ 90 color:black; 91 font-family: 'Work Sans'; 92 font-weight: 800; 93 font-size: 1.3em; 94 letter-spacing: 0.1em; 95}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/17 05:07