Q&A
ご教授頂きありがとうございます！
失礼しました、こちらのURLになります。
https://www.evoworx.co.jp/
お教えいただいた通りに指定すると添付していただいたような反応になりました。
大変助かりました、ありがとうございました。
前提・実現したいこと
マウスストーカーのデザインを作っております。
カーソルを黒い点にし、そこについてくる丸い円を作り、リンクの上に来ると丸い円が拡大するところまでは出来ているのですが、細かいことなのですがこの丸い円の色が青なのでテキスト(黒色)を通ると重なって見えにくい状態になってしまうため下記ホームページのように、テキストの上に重なった時は色を見えやすい色にしたい(こちらでは黒いテキストの上に青いマウスストーカーが来るとテキストが黄色に変化できています)のですが色を変えることができない状況です、、何卒ご教授頂けますでしょうか。よろしくお願い致します。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title></title> 6<meta name="viewport" content="width=device-width,initial-scale=1.0"> 7<link rel="stylesheet" type="text/css" href="css/style.css"> 8<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 9<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js"></script> 10</head> 11<body> 12 13 <div class="cursor"></div> 14 <div class="follower"></div> 15 16<!--=============JS ===============--> 17<!--jQuery--> 18<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> 19<script src="js/script2.js"></script> 20</body> 21</html>
css
1body { 2 position: relative; 3 cursor: none; 4} 5.cursor, 6.follower { 7 border-radius: 50%; 8 position: fixed; 9 top: 0; 10 left: 0; 11 pointer-events: none; 12 cursor: none; 13} 14.cursor { 15 width: 8px; 16 height: 8px; 17 background-color: #1a1a1a; 18 z-index: 1001; 19} 20.follower { 21 display: flex; 22 justify-content: center; 23 align-items: center; 24 width: 40px; 25 height: 40px; 26 background-color:#1B1464; 27 transition: transform ease .1s; 28 text-align: center; 29 z-index: 1000; 30mix-blend-mode:exclusion; 31pointer-events: none; 32 33} 34.is-active { 35 transform: scale(3); 36} 37.follower span{ 38 display: inline-block; 39 font-size: 14px; 40 font-weight: bold; 41 transform: scale(0); 42}
js
1var 2 cursor = $(".cursor"), 3 follower = $(".follower"), 4 cWidth = 8, 5 fWidth = 40, 6 delay = 10, 7 mouseX = 0, 8 mouseY = 0, 9 posX = 0, 10 posY = 0; 11 12 TweenMax.to({}, .001, { 13 repeat: -1, 14 onRepeat: function() { 15 posX += (mouseX - posX) / delay; 16 posY += (mouseY - posY) / delay; 17 18 TweenMax.set(follower, { 19 css: { 20 left: posX - (fWidth / 2), 21 top: posY - (fWidth / 2) 22 } 23 }); 24 25 TweenMax.set(cursor, { 26 css: { 27 left: mouseX - (cWidth / 2), 28 top: mouseY - (cWidth / 2) 29 } 30 }); 31 } 32 }); 33 34 $(document).on("mousemove", function(e) { 35 mouseX = e.clientX; 36 mouseY = e.clientY; 37 }); 38 39 $("a").on({ 40 "mouseenter": function() { 41 42 follower.addClass("is-active"); 43 }, 44 "mouseleave": function() { 45 cursor.removeClass("is-active"); 46 follower.removeClass("is-active"); 47 } 48 });
試したこと
外部のjsファイルの読み込みや、mix-blend-modeを調整してみたのですが、変化がありませんでした。
補足情報（FW/ツールのバージョンなど）
回答2件
0
ベストアンサー
使い方が合っているか分かりませんが is-active クラスに下記設定を追加してみたところ重なった部分の色が変更できるようでした。
.is-active { transform: scale(3); background-color: #e4eb9b; mix-blend-mode: difference; }
■ 実行結果
＜参考＞
■ CSS3で色の反転を実現する
https://qiita.com/RyoTa_0222/items/068e3c7b4e7b468e47c0
■ 反転色と補色のカラーコードを計算します。
https://www.wave440.com/php/iro.php
投稿2021/11/28 17:53
編集2021/11/28 18:10
総合スコア4633
0
「下記ホームページ」がどこのことか分かりませんが、とりあえずbodyのbackground-colorが設定されていないのが問題かと思います。
bodyのbackground-colorを#ffffff、
.followerのbackground-colorを#e4eb98にしたものがこちらです。
投稿2021/11/29 04:51
総合スコア3047
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/11/29 07:35