ホバー時の色がランダムで変わる

2023年10月5日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回はマウスホバーした時の色をランダムで変えてみようと思います。

参考：かちびと.net｜hover時のテキストカラーをランダムにする

スクリプトを書く

前回出てきたMath.randomとMath.floorを使います。

赤、黄、緑、青の4色にしてみます。

<span class="hover-rainbow">ここにマウスホバー</span>

$(".hover-rainbow").hover(function() {
  var colors = ["#dc3545", "#ffc107", "#28a745", "#007bff"];
  var pick = Math.floor(Math.random() * 4);
  var color = colors[pick];
  $(this).css('color', color);
}, function() {
  $(this).css('color', '#333');
});

疑似要素の色は変更不可？

以前やったアニメーションするアンダーラインのような疑似要素の色もランダムで変えられるでしょうか。

<span class="hover-rainbow-underline">ここにマウスホバー</span>

.hover-rainbow-underline {
  position: relative;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  transition: all .3s;
}

.hover-rainbow-underline:hover {
  color: #333;
}

.hover-rainbow-underline::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 3px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}

.hover-rainbow-underline:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}

$(".hover-rainbow-underline").hover(function() {
  var colors = ["#dc3545", "#ffc107", "#28a745", "#007bff"];
  var pick = Math.floor(Math.random() * 4);
  var color = colors[pick];
  $(this).css('color', color);
}, function() {
  $(this).css('color', '#333');
});

$(".hover-rainbow-underline::after").hover(function() {
  var colors = ["#dc3545", "#ffc107", "#28a745", "#007bff"];
  var pick = Math.floor(Math.random() * 4);
  var color = colors[pick];
  $(this).css('background-color', color);
}, function() {
  $(this).css('background-color', '#333');
});

うーん...やっぱダメかぁ。疑似要素はDOM（Document Object Model）ではないため、jQueryで操作できないようです。ところでDOMって何でしょう。ジェットストリームアタック？

代替案

疑似要素は使わずborder-bottomを使ってみます。

<span class="hover-rainbow-underline2">ここにマウスホバー</span>

.hover-rainbow-underline2 {
  text-decoration: none;
  border-bottom: solid 3px transparent;
  cursor: pointer;
  transition: all .6s;
}

.hover-rainbow-underline2:hover {
  border-bottom:solid 3px #333;
  transition: all .6s;
}

$(".hover-rainbow-underline2").hover(function() {
  var colors = ["#dc3545", "#ffc107", "#28a745", "#007bff"];
  var pick = Math.floor(Math.random() * 4);
  var color = colors[pick];
  $(this).css('color', color);
  $(this).css('border-bottom-color', color);
}, function() {
  $(this).css('color', '#333');
  $(this).css('border-bottom-color', 'transparent');
});

まとめ

いろいろ試してみたのですが、これが限界のようです。

background-imageとlinear-gradientを使ったらできるかなと思いましたができませんでした。今後の課題とします。