必要なホバー効果を1つだけ処理するときにこれを達成するための解決策を見ていますが、メインの親divの背景をそれぞれ別の画像に変更する4つの子divが必要です。
これはCSSでは不可能だと思います。
<div id="buttonBox">
<div id="schedBox">
<a href="#">Schedule</a>
</div>
<div id="transBox">
<a href="#">Transformation</a>
</div>
<div id="destBox">
<a href="#">Destination</a>
</div>
<div id="inspirBox">
<a href="#">Inspiration</a>
</div>
</div>
または、子 div をそれぞれ異なる背景にすることもできます。1 つの子 div をホバーすると、すべての子 div の背景が別の色に変わりますが、2 番目の div にホバーすると前の div.. 後続の兄弟のみに影響を与える方法がわかりませんでした。