質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.64%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 831

gankonako

score 16

実現したいこと

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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • akihiro3

    2018/12/04 12:01

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

    キャンセル

  • x_x

    2018/12/04 17:00

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

    キャンセル

  • gankonako

    2018/12/04 17:07

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

    キャンセル

回答 3

checkベストアンサー

+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 との差を取ればいいでしょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/04 18:13 編集

    おお、ありがとうございます!
    お蔭さまでかなり進んだかなと自己満足しているのですが笑、次のコードではどこを直すべきでしょうか?
    「.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");
    });
    });

    キャンセル

  • 2018/12/04 18:15

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

    キャンセル

  • 2018/12/04 18:20

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

    キャンセル

  • 2018/12/04 18:26

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

    キャンセル

+1

dy >= 50% 

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/04 17:09

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

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/04 17:53 編集

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

    $(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");
    });
    });

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る