複数の子要素のboxのひとつにhoverすると、全体の背景色をそのboxにあわせた色に変更します。

 

サンプルのhtmlソース

<section>
    <div class="row">
        <ul>
            <li>
                <div>
                    <h2>#1</h2>
                </div>
            </li>
            <li>
                <div>
                    <h2>#2</h2>
                </div>
            </li>
            <li>
                <div>
                    <h2>#3</h2>
                </div>
            </li>
            <li>
                <div>
                    <h2>#4</h2>
                </div>
            </li>
            <li>
                <div>
                    <h2>#5</h2>
                </div>
            </li>
            <li>
                <div>
                    <h2>#6</h2>
                </div>
            </li>
        </ul>
    </div>
</section>

サンプルのCSSソース

ul {
    color: #000;
    display: flex;
    list-style: none;
    margin: 0 -1em;
    padding: 0;
}
ul > li {
    flex: 1;
    margin: 1em;
    text-align: center;
}
ul > li:not(:hover),
ul > li > div {
    position: relative;
    z-index: 1;
}
ul > li:before {
    background: transparent;
    bottom: 0;
    content: '';
    left: 0;
    opacity: 0.35;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transition: background 0.2s ease-in-out;
    z-index: 0;
}
ul > li:hover:before {
    background: #fff;
}
ul > li > div {
    background: #fff;
    height: 100%;
    padding: 1em;
}
ul > li:nth-of-type(6n+1):hover:before,
ul > li:nth-of-type(6n+1) > div {
    background: #a2ed56;
}
ul > li:nth-of-type(6n+2):hover:before,
ul > li:nth-of-type(6n+2) > div {
    background: #83e4e2;
}
ul > li:nth-of-type(6n+3):hover:before,
ul > li:nth-of-type(6n+3) > div {
    background: #fd6470;
}
ul > li:nth-of-type(6n+4):hover:before,
ul > li:nth-of-type(6n+4) > div {
    background: #fca858;
}
ul > li:nth-of-type(6n+5):hover:before,
ul > li:nth-of-type(6n+5) > div {
    background: #fddc32;
}