###実現したいこと
CSSでホバーしたとき、それが上半分なら.hover-up
を付与し、下半分なら.hover-down
を付与するという機能を実現したいのですが、、
その場合のjQueryの書き方について教えて頂けませんでしょうか。
###対象のHTML
対象のHTMLはこのようになっています。.img
か.name
にホバーしたら、.hello
にクラスを付与したいです。
html
1<article> 2 <div class="img">img</div> 3 <div class="name">name</div> 4 <div class="hello">hello</div> 5</article> 6 7<style> 8article { 9 position: relative; 10 width: 100px; 11 height: 100px; 12 background: khaki; 13} 14.hello{ 15 display: none; 16} 17.hello.hover-up{ 18 display: block; 19 position: absolute; 20 bottom:0; 21 } 22.hello.hover-down{ 23 display: block; 24 position: absolute; 25 top: 0; 26 } 27</srtyle>
###試したjQuery
下記でコメントしてあるような流れを考えています。
jquery
1<script> 2$('img, .name').hover( 3 4 /* マウスホバーしたときの処理 */ 5 function() { 6 //マウスのY座標を取得 7 var dy = e.clientY; 8 //現在地が上半分ならhover-up 9 if ( dy >= 50% ) { 10 $(this).closest('article').find('.hello').addClass('hover-up'); 11 } 12 //下半分ならhover-down 13 else{ 14 $(this).closest('article').find('.hello').addClass('hover-down'); 15 } 16 }, 17 18 /* マウスホバーやめたときの処理 */ 19 function() { 20 //クラス外す 21 $(this).closest('article').find('.hello').removeClass('hover-up hover-down'); 22 } 23 24); 25</script>
回答3件
あなたの回答
tips
プレビュー