hover時に複数箇所色をつける

最初cssだけで作ろうと思っていたのですが、階層の縛りがあってうまくいかずで、、

jQueryで作ってみました！

See the Pen
Untitled by 344yuu (@344yuu)
on CodePen.

pink色の箇所が、area0で作った箇所です。

listのorangeをhoverしたときと、area0のピンクをhoverしたとき、両方連動して色をつけています。

cssだけでも作れるようですが、同じ階層の下に置かないと動作しないようで諦めました、、

.l-item0.active,
.area0.active {
  background-color: rgba(0, 0, 0, .3);
}

・activeクラスにhover時の色をcssでつける。

$('.l-item0').hover(function() {
    $('.l-item0').addClass("active");
    $('.area0').addClass("active");

・(‘.l-item0’)hover時に、(.l-item0)と(.area0)に、activeクラスをjQueryでつける。

 $('.area0').hover(function() {
    $('.l-item0').addClass("active");
    $('.area0').addClass("active");

・逆も同じように、(.area0)hover時に、(.l-item0)と(.area0)に、activeクラスをつける

function() {
    $('.l-item0').removeClass("active");
    $('.area0').removeClass("active");

・そして、removeClassでactiveを外す

こちらのサイトを参考に、少しアレンジして使用しました↓