九州を形作れ。それはら県ごとに色が変わる。

要件：県名の書いてあるボックスに触れると、地図上の該当する県の色が変わるようにする。

Webサイトのデザインで、そういうのがありました。
そんなに難しくはないです。
まずJQなりJSを使って、県名の書いてあるボックスをhoverしたら、該当する県の要素にclassを追記します。で、追記したclassに変更する色の記述を記載するだけです。
今日日はキーワードを適切に打ち込めば、苦労した先人が惜しみなく手法を披露してくれてますのでそんなに難しくない。

手が止まったのは地図。
「どうやって福岡なり佐賀なり熊本の色を変える？」
デザインについてきた地図は、県境で区切られている1枚ものです。単純に思いついたのは、パズルみたいに切り分けpositionで繋げるパターン。…いやいや、もっと単純でスマートな方法があるんじゃないか？！
そう思いつつ、顧客からの要望書がPDFファイルであったので覗いてみたんですが、「（tableで四角を並べたような）単純な形状で簡略化したものでOK！」とあってちょっと一安心。　……でも、既にちゃんとした日本地図状態で顧客のOKも頂いてるので、やはりないよなぁ……パズルかなぁ。

パズルって楽しいね？！
切り分け自体はPSで簡単にできるので、単純に数こなすだけです（なお案件は関東辺りまでの地図だったので、その辺まで切り抜きまくった）。とりあえずpng画像と化した九州各県をpositionで繋げて、無事に完成……まだ完成じゃない。本題は「アクションに対して県の色が変わる」。
色変えの方法を模索するだけなので、単純に各県のpng画像にhoverしたら色が変わるようにして、いくつか試しました。

×：疑似要素でbackground-colorを使って上から色をかぶせる。
　図形全体に色が乗って、周囲の県に影響が出た。やる前から判ってたけど一応やってみた。
×：疑似要素でfilterを使ってで色調etcを弄って色を変える
　png画像だけ反応してくれるので上記の不具合は出ないが、色調いじる前提で画像の色を黒や白単色にしていないので、うまく色が変化しない。
………ぐぬぬ、色違いの画像を用意して、入れ替えるという安易な手法しかないのか？（正直、また数十回入れ替え画像作るのめんどくさい）

そんな中思いついたのが、「疑似要素で画像を一旦真っ黒にしてからfilterをかける」という方法。思い付きでしたが、意外に上手くいきました。
０：疑似要素で覆うので、imgを含む要素は予め「position: relative;」して疑似要素も「position: absolute;」で。
１：beforeでfilterの明度/色調を調整して、画像を真っ黒にする。
２：afterにもfilterを使って、希望する色(※）に調整する。
　※どんな色にも変更できるかまでは未検証。

もっとスマートな解決方法があると思うんですが、なんとか自分なりの回答を導けると、気持ちいですよね。