###質問の概要
ホバーによる要素表示において、表示後の要素にカーソルを移した場合にも、引き続き表示後の要素を表示させたままにしたいです。
###問題と目的
下記ソースコードで、.name
にホバーしたときに.menu
を表示させているのですが、ここでカーソルを.menu
に移すと.menu
が消えてしまいます。
おそらく「.name
からホバーが外れたから.menu
はもういらないよね?」と判断されてしまうためだと思うのですが、目的は.menu
を表示させたままにすることです。
みなさんはこのようなケースをどうに解決されますでしょうか?
原因や直し方についてご指導頂ければと思い質問させて頂きました。
宜しくお願い致します。
ちなみに下記ソースコードの実際のサンプルもございますので、よろしければお試し下さい。
###ソースコード
まずは基本的なデザインのHTMLとCSSはこちらです。
html
1<main> 2 3 <article> 4 <div class="name"><p>jon</p></div> 5 <div class="menu">jonのmenu</div> 6 </article> 7 8 <article> 9 <div class="name"><p>smith</p></div> 10 <div class="menu">smithのmenu</div> 11 </article> 12 13</main>
css
1main { 2 display: flex; 3 flex-direction: column; 4 height: 100vh; 5 background: pink; 6 justify-content: center; 7 align-items: center; 8} 9article { 10 position: relative; 11 width: 100px; 12 height: 100px; 13 background: khaki; 14 margin: 50px auto 50px; 15} 16.name { 17 display: flex; 18 justify-content: center; 19 align-items: center; 20 height: 100%; 21} 22.menu { 23 display: none; 24 justify-content: center; 25 align-items: center; 26 width: 100px; 27 height: 100px; 28 position: absolute; 29 left: 50px; 30 background: palegreen; 31} 32.menu.hover-up{ 33 display: flex; 34 position: absolute; 35 bottom: calc(50px + 0.5em); 36 } 37.menu.hover-down{ 38 display: flex; 39 position: absolute; 40 top: calc(50px + 0.5em); 41} 42.menu.fadeInDown.hover-up { 43 animation-duration: 0.2s; 44 animation-delay: 0.2s; 45} 46.menu.fadeInUp.hover-down { 47 animation-duration: 0.2s; 48 animation-delay: 0.2s; 49} 50.fadeInUp { 51 animation-name: fadeInUp; 52} 53.fadeInDown { 54 animation-name: fadeInDown; 55} 56@keyframes fadeInUp { 57 from { 58 opacity: 0; 59 transform: translate3d(0, 100%, 0); 60 } 61 to { 62 opacity: 1; 63 transform: translate3d(0, 0, 0); 64 } 65} 66@keyframes fadeInDown { 67 from { 68 opacity: 0; 69 transform: translate3d(0, -100%, 0); 70 } 71 to { 72 opacity: 1; 73 transform: translate3d(0, 0, 0); 74 } 75} 76
問題の要素のやりとりは下記のjQueryになります。
jQuery
1// ホバーしたとき 2$(".name p").mouseenter(function() { 3 // top座標と、.user_nameの高さを取得 4 var that = $(this).closest('article').find('.name'); 5 var dy = $(that).offset().top - $(window).scrollTop() + ($(that).outerHeight() / 2); 6 // 画面の高さを取得 7 var windowheight = $(window).innerHeight() / 2; 8 // クラス付与 9 if( dy >= windowheight ){ 10 $(this).closest('article').find('.menu').addClass('hover-up fadeInDown'); 11 }else{ 12 $(this).closest('article').find('.menu').addClass('hover-down fadeInUp'); 13 } 14}); 15 16// ホバーやめたとき 17$(".name p, .menu").mouseleave(function() { 18 $(this).closest('article').find('.menu').removeClass("hover-up fadeInDown hover-down fadeInUp"); 19});
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/05 01:04 編集
2018/12/05 02:06
2019/01/21 01:28 編集
2019/01/21 01:03
2019/01/21 01:28