<行いたいこと>
①カーソルがfooterの領域に入ったら<p class="box"></p>の項目がスルって出現する。
(パっと出るのではなく、下からスルっと出るようにしたいです。)
②カーソルが<div class='footer'></div>以外の領域に入ったら<p class="box"></p>の内容が消える。
(下へスルっと消えるイメージです。)
<条件>
bodyに記述してあるのは、下記のみです。
(カスタマイズで使用したいため。body内には直接記述ができないという条件です。)
<p class="box">テストテストテストテストテストテストテストテストテストテスト</p>
そのため、まずjsで<div class='footer'></div>の親要素を作りました。
$(".box").wrap("<div class='footer'></div>");
やってみたこと
<script> $('.footer').hover(function() { $(".box").removeClass("slide"); }); $(' ').hover(function() { $(".box").addClass("slide"); }); </script>
.footer{ position: absolute; bottom: 0; width: 100%; padding: 72px 0; background-color: #dadada; } .box{ background-color: #a9a9a9; padding: 40px 0; position: absolute; bottom: 0; width: 100%; text-align: center; } .box.slide{ opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
これだとパっと出現してしまいますし、
<div class='footer'></div>以外の領域に入ったらという時の下記の記述をどうすれば良いか分かりません。$(' ').hover(function() {
$(".box").addClass("slide");
});
もしよろしければご教授お願いいたします。
回答2件
あなたの回答
tips
プレビュー