ホバー座標に応じたクラス付与をしたい

Question

###実現したいこと

CSSでホバーしたとき、それが上半分なら.hover-upを付与し、下半分なら.hover-downを付与するという機能を実現したいのですが、、

その場合のjQueryの書き方について教えて頂けませんでしょうか。

###対象のHTML
対象のHTMLはこのようになっています。.imgか.nameにホバーしたら、.helloにクラスを付与したいです。

<article>
  <div class="img">img</div>
  <div class="name">name</div>
  <div class="hello">hello</div>
</article>

<style>
article {
  position: relative;
  width: 100px;
  height: 100px;
  background: khaki;
}
.hello{
  display: none;
}
.hello.hover-up{
  display: block;
  position: absolute;
  bottom:0;
 }
.hello.hover-down{
  display: block;
  position: absolute;
  top: 0;
 }
</srtyle>

###試したjQuery
下記でコメントしてあるような流れを考えています。

<script>
$('img, .name').hover(

  /* マウスホバーしたときの処理 */
  function() {
    //マウスのY座標を取得
    var dy = e.clientY;
    //現在地が上半分ならhover-up
    if ( dy >= 50% ) {
    $(this).closest('article').find('.hello').addClass('hover-up'); 
    }
    //下半分ならhover-down
    else{
    $(this).closest('article').find('.hello').addClass('hover-down'); 
    }
  },

  /* マウスホバーやめたときの処理 */  
  function() {
    //クラス外す
    $(this).closest('article').find('.hello').removeClass('hover-up hover-down');
  }

);
</script>

Comments

[akihiro3]

すみません。書き方を教えてほしいとは何を聞かれてるのかが分からないのですが、、、何を使うかです？それとも手順（考え方？）ですか？あと、そのコードは試したコードですか？

[x_x]

要素の座標ではなくマウスの座標でいいのですか？

[gankonako]

x_x様の仰るように、要素の座標でないといけませんね。どうもありがとうございます。

Answer 1

座標の取り方ですが、要素(thisだとして)がわかれば次の通り

var rect = this.getBoundingClientRect();
var dy = (rect.top + rect.bottom) / 2;

https://developer.mozilla.org/ja/docs/Web/API/Element/getBoundingClientRect

jQueryだと少し面倒です。

var dy = $(this).offset().top - $(window).scrollTop() + ($(this).outerHeight() / 2);

これと $(window).innerHeight() / 2 との差を取ればいいでしょう。

Comments

[gankonako]

おお、ありがとうございます！
お蔭さまでかなり進んだかなと自己満足しているのですが笑、次のコードではどこを直すべきでしょうか？
「.hover-up」しか付与してくれない状態です。

$(function() {
// ホバー時の処理
$(".name").hover(function() {
// top座標と、ボタン自身の高さを取得
var dy = $(this).offset().top - $(window).scrollTop() + ($(this).outerHeight() / 2);
// 画面の高さを取得
var window = $(window).innerHeight() / 2;
// カーソルが当たった時の処理
if( dy >= window ){
$(this).closest('article').find('.hello').addClass('hover-up');
}else{
$(this).closest('article').find('.hello').addClass('hover-down');
}
},
// カーソルが離れた時の処理
function() {
$(this).closest('article').find('.hello').removeClass("hover-up hover-down");
});
});

[x_x]

まずwindowという変数名を変えてみては？

[x_x]

それと、誤記と思って脳内補正していましたが</srtyle>ではなく</style>です。これは大丈夫でしょうか？

[gankonako]

変数名~！！windowってダメなんだ…。どうもありがとうございます。スタイルも仰る通りですね。素人にお付き合い頂き感謝申し上げます。

Answer 2

dy >= 50%

50%なんて表現うけつけませんよね

Comments

[gankonako]

マウス位置でなくて要素位置でした。失礼致しました。

Answer 3

手順1.要素の座標取得
手順2.要素の高さを取得し2で割る
手順3.手順1と手順2を足す
手順4.スクロール位置が、手順3より多いか少ないかで条件分岐する

上記の方法ではどうでしょうか？

Comments

[gankonako]

ありがとうございます。
検索してみたのですが、このような感じかと思うのですが、あと直すべき点はどこか教えて頂けませんか？

$(function() {
// ホバー時の処理
$("img, .name").hover(function() {
// top座標と、ボタン自身の高さを取得
var positionTop = $(this).position().top + $(this).outerHeight();
//スクロール位置を取得
var strollTop = $(this).scrollTop();
// カーソルが当たった時の処理
if( positionTop >= strollTop ){
$(this).closest('article').find('.hello').addClass('hover-up');
}else{
$(this).closest('article').find('.hello').addClass('hover-down');
}
},
// カーソルが離れた時の処理
function() {
$(this).closest('article').find('.hello').removeClass("hover-up hover-down");
});
});