65746


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

  * jQuery の hover()
  * CSS の :hover

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

* * *

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

[code]

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

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

[code]

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

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


CC BY-SA 4.0
2020-04-19T01:04:28.800
65745
2020-04-19T02:33:44.520
7886
question
jquery css
マウスオーバーを実装する際、「jQuery の hover()」と「CSS の :hover 」では違いがありますか？


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

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

[code]

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

[code]

    <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>
[/code]

[code]

    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", "");
      }
    );
[/code]

[code]

    .hoge {
      width: 150px;
      height: 150px;
      background: red;
    }
    
    .hoge {
      background: red;
    }
    
    small {
      color: red;
    }
[/code]

[code]

    <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>
[/code]

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

[code]

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

[code]

    .hoge {
      width: 150px;
      height: 150px;
      background: red;
    }
[/code]

[code]

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

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

[code]

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

[code]

    .hoge {
      width: 150px;
      height: 150px;
      background: red;
    }
[/code]

[code]

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


CC BY-SA 4.0
2020-04-19T02:24:13.780
65746
2020-04-19T02:33:44.520
2020-04-19T02:33:44.520
32986
32986
65745
answer