2

知りたいこと
マウスオーバー実装する際、下記何れの方法でも出来ることは同じですか?

  • jQuery の hover()
  • CSS の :hover

・jQuery は、CSSを操作してマウスオーバーを実装するので、出来ることは同じ?
・jQuery の hover()でしか出来ないことはありますか?


質問経緯
マウスオーバー後の表示色を1色指定しているjQueryコードがあります。マウスオーバー時に元の色を表示するよう変更しようしたのですが期待した通り動作しません
元コード

hoge.hover(function () {
    $(this).css({
        'background': settings.focusColor,
        'cursor': 'pointer'
    });
}, function () {
    $(this).css({
        'background': settings.background,
        'cursor': 'default'
    });
});

マウスオーバー時に元の色を表示するよう変更しようしたのですが期待した通り動作しないコード

hoge.hover(function () {
    $(this).css({
        'background': settings.focusColor,
        'cursor': 'pointer'
    });
}, function () {
    $(this).css({
        'background': '',
        'cursor': 'default'
    });
});

解決できないためCSSで実装するよう変更しようと思うのですが、マウスオーバー(マウスアウト含む)をjQueryで実装している理由がもしかしたら何かあるのかな、と思い質問しました

1 件の回答 1

3

・jQuery は、CSSを操作してマウスオーバーを実装するので、出来ることは同じ?

はい、同様のことが行えます。また JavaScript を使うことで、 CSS セレクタでは選択出来ない要素へ装飾を行うことが出来ます。

.hoge {
  width: 150px;
  height: 150px;
  background: red;
}

.hoge:hover {
  background: blue;
}

small {
  color: red;
  /* .hoge:hover時にsmallを選択出来ない */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <div class="hoge"></div>
</main>
<footer>
  <small>.hogeと連動して文字色が変わる</small>
</footer>

var hoge = $(".hoge");

hoge.hover(
  function() {
    $(this).css({
      "background": "blue",
      "cursor": "pointer"
    });
    $("small").css("color", "blue");
  },
  function() {
    $(this).css({
      "background": "",
      "cursor": "default"
    });
    $("small").css("color", "");
  }
);
.hoge {
  width: 150px;
  height: 150px;
  background: red;
}

.hoge {
  background: red;
}

small {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <div class="hoge"></div>
</main>
<footer>
  <small>.hogeと連動して文字色が変わる</small>
</footer>

ただし、 hover メソッドはマウスが要素に入ったとき、出たときの両方でイベントの設定が必要となる可能性があります。たとえば、 mouseleave イベントのイベントハンドラで何もしていない場合、マウスが要素から外れても mouseenter イベントで適用された装飾が残り続けます。

var settings = {
  focusColor: "blue"
};
var hoge = $(".hoge");

hoge.hover(
  function() {
    $(this).css({
      "background": settings.focusColor,
      "cursor": "pointer"
    });
  },
  function() {
    // 何もしない
  }
);
.hoge {
  width: 150px;
  height: 150px;
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hoge"></div>

「元の色」とは何かがわからないですが、質問文のコードは正常に動作しているように見えます。「マウスオーバー時に元の色 (ここでは赤) を表示したい」ならば、そもそも jQuery でのコードは不要です。もし「元の色」が赤や青でないならば、その色を css メソッドの background プロパティに設定する必要があります。

var settings = {
  focusColor: "blue"
};
var hoge = $(".hoge");

hoge.hover(
  function() {
    $(this).css({
      "background": settings.focusColor,
      "cursor": "pointer"
    });
  },
  function() {
    $(this).css({
      "background": "",
      "cursor": "default"
    });
  }
);
.hoge {
  width: 150px;
  height: 150px;
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hoge"></div>

1
  • JavaScript 使用すると、CSS セレクタ以上のことが出来る(場合もある)のですね。初めて知りました。「質問文のコードは正常に動作しているように見えます」。原因の切り分けに役立ちました。最後のコードスニペットをブラウザ経由で「<div class="hoge" style="cursor: default;background-color:green"></div>」へ変更して気が付いたことがあります。私は、マウスホーバーする前に画面表示されていた色が必ず表示されるものと思っていたのですが、必ずしもそういうわけではないのですね。<style></style>部分の内容が反映される、ということに気が付きました。質問文に掲載している「期待した通り動作しないコード」は、実際には事前にjQueryでCSS操作した上で、<style></style>にも記述があり、HTMLにもstyle属性を追加したりしているカオスなコードです。やりたいことは単純なマウスホーバーなので、今回はCSSで実装することにしました。
    – re9
    Commented 2020年4月19日 11:53

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。