将鼠标div悬停在各个子div上时,将父div更改为其他背景

Nat*_*n S 10 html css hover

在处理只有一个所需的悬停效果时,我看到了解决方案,但我希望有四个子div,每个div将主父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>
Run Code Online (Sandbox Code Playgroud)

或者,我可以让每个孩子的div都有不同的背景.徘徊一个孩子div将所有子div背景改为单独的颜色,但我无法弄清楚如何在第二个div上悬停影响前一个div ..只有后续的兄弟姐妹.

Bil*_*oat 0

遗憾的是 CSS 中没有父选择器。

你必须使用 javascript 来实现你想要做的事情。