よく管理画面で次の様なテーブルの行にカーソルをあわせるとその行の色が変わるデザインがあります。これは横幅が長い表において人間の目で左端と右端のデータを取り違えない点で特に有効なデザインです。左端に名前やID、右端に操作系統が並んでいる状態で画面いっぱいまで表が広がっている場合、操作すべきでないものを誤って操作してしまうことが考えられ、これを防げます。
/* テーブルの行の上にカーソルをのせると背景色が変わる */
tbody tr:hover {
background-color: #ccffff;
}
また次の様に状態が一目でわかる様にするために表の中に色をつけることがしばしばあります。
/* 状態を見やすくするために背景色を特別に変える */
td.init {
background-color: white;
}
td.annul {
background-color: #f00;
color: #fff;
}
td.complete {
background-color: #8f8;
}
これは便利なのですが、手なりで作るとカーソルによる背景色の変更と色指定が衝突します。もし常にカーソルの側を優先するのであれば、カーソルをあわせた行の状態が一目ではわかりません。もし常に状態の側を優先するのであれば、どこにカーソルをあわせているかの情報が途切れます（もっとも状態列にそれ程長い幅を取らなければ大した問題になりません）。こうなるとカーソルをあわせた時にいい感じに二つの色を合成した色が表示される様にしたくなります。
解決方法として自前で計算する方法も考えられますが、これは手間と適切な計算の仕方の都合であまり使いません。とはいえ、自由に指定できるのは魅力的であり、後述の方法では期待した結果を得られない時に使います。
自分がおすすめする解決方法は次のmix-blend-mode: multiply;を用いた方法です。
td {
mix-blend-mode: multiply;
}
mix-blend-mode – CSS： カスケーディングスタイルシート ｜ MDN
mix-blend-mode: multiply;は複数の色が指定されている場合、それを掛け合わせた色を表示します。この掛け合わせの計算は白っぽさを透明度の高さにしています。このため白背景に薄い色付けのデザインによく合い、いい感じに色がついている部分に更に色をつけてくれます。加えて自前で計算する必要もなく、さらっと設定できます。
