マウスオーバーを実装する際、「jQuery の hover()」と「CSS の :hover 」では違いがありますか?

投稿者: Anonymous

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

  • 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で実装している理由がもしかしたら何かあるのかな、と思い質問しました

解決

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

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

_x000D_

_x000D_

.hoge {_x000D_
  width: 150px;_x000D_
  height: 150px;_x000D_
  background: red;_x000D_
}_x000D_
_x000D_
.hoge:hover {_x000D_
  background: blue;_x000D_
}_x000D_
_x000D_
small {_x000D_
  color: red;_x000D_
  /* .hoge:hover時にsmallを選択出来ない */_x000D_
}

_x000D_

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

_x000D_

_x000D_

_x000D_

_x000D_

_x000D_

var hoge = $(".hoge");_x000D_
_x000D_
hoge.hover(_x000D_
  function() {_x000D_
    $(this).css({_x000D_
      "background": "blue",_x000D_
      "cursor": "pointer"_x000D_
    });_x000D_
    $("small").css("color", "blue");_x000D_
  },_x000D_
  function() {_x000D_
    $(this).css({_x000D_
      "background": "",_x000D_
      "cursor": "default"_x000D_
    });_x000D_
    $("small").css("color", "");_x000D_
  }_x000D_
);

_x000D_

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

_x000D_

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

_x000D_

_x000D_

_x000D_

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

_x000D_

_x000D_

var settings = {_x000D_
  focusColor: "blue"_x000D_
};_x000D_
var hoge = $(".hoge");_x000D_
_x000D_
hoge.hover(_x000D_
  function() {_x000D_
    $(this).css({_x000D_
      "background": settings.focusColor,_x000D_
      "cursor": "pointer"_x000D_
    });_x000D_
  },_x000D_
  function() {_x000D_
    // 何もしない_x000D_
  }_x000D_
);

_x000D_

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

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<div class="hoge"></div>

_x000D_

_x000D_

_x000D_

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

_x000D_

_x000D_

var settings = {_x000D_
  focusColor: "blue"_x000D_
};_x000D_
var hoge = $(".hoge");_x000D_
_x000D_
hoge.hover(_x000D_
  function() {_x000D_
    $(this).css({_x000D_
      "background": settings.focusColor,_x000D_
      "cursor": "pointer"_x000D_
    });_x000D_
  },_x000D_
  function() {_x000D_
    $(this).css({_x000D_
      "background": "",_x000D_
      "cursor": "default"_x000D_
    });_x000D_
  }_x000D_
);

_x000D_

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

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<div class="hoge"></div>

_x000D_

_x000D_

_x000D_

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *