将鼠标悬停在个别子div上时，将父div更改为不同的背景 [英] Change parent div to a different background when hovering over individual child divs

问题描述

我看到的解决方案来完成这一点，当处理只有一个所需的悬停效果，但我想有四个子div，每个更改主要父div的
背景为一个单独的图像。

I'm seeing the solutions to accomplish this when dealing with only one desired hover effect, but I want to have four child divs that each change the main parent div's background to a separate image.

我假设这是CSS不可能。

I'm assuming this isn't possible with 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有不同的背景。悬停一个孩子div将所有的孩子div背景变成一个单独的颜色，但我不知道如何有一个悬停在第二个div影响以前的div ..只有后续的兄弟姐妹。

Alternatively, I could have the child divs each have a different background. Hovering one child div would change all child div backgrounds to a separate colour, but I couldn't figure out how to have a hover on the 2nd div affect the previous div.. only subsequent siblings.

推荐答案

是的，这是可能的。尝试此操作：

Yes, it is possible. Try this:

#schedBox:hover, #buttonBox{
   background: red;
}

#schedBox:hover{
   background: green;
}

这篇关于将鼠标悬停在个别子div上时，将父div更改为不同的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！