Skip to main content
本文に 1578 文字追加
ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41
.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'"background": settings.focusColor,
      'cursor'"cursor": 'pointer'"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'"background": settings.focusColor,
      'cursor'"cursor": 'pointer'"pointer"
    });
  },
  function() {
    $(this).css({
      'background'"background": ''"",
      'cursor'"cursor": 'default'"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>
ただし、 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>
.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>
ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41

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

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

ただし、 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>